html – 使表格宽度为100%,最后一列填充余数,而不挤压其他列的内容宽度

html – 使表格宽度为100%,最后一列填充余数,而不挤压其他列的内容宽度,第1张

概述有可能使一个表(它将动态创建文本)具有例如: 桌面宽度为屏幕的100% 5列 最后一列为空() 前四列有文字,宽度是动态的 最后一列是宽度的其余部分 没有压缩前四列的文本 我有这个到目前为止,它压缩文本,这是我想避免的: <table style="width:100%;" border="1"><tr> <td>One Two Three</td> <td>Two Three 有可能使一个表(它将动态创建文本)具有例如:

桌面宽度为屏幕的100%
5列
最后一列为空()
前四列有文字,宽度是动态的
最后一列是宽度的其余部分
没有压缩前四列的文本

我有这个到目前为止,它压缩文本,这是我想避免的:

<table  border="1"><tr>    <td>One Two Three</td>    <td>Two Three Four</td>    <td>Three Four Five</td>    <td>Four Five Six</td>    <td >&nbsp;</td></tr></table>

我不能使用“white-space:nowrap”,因为如果有足够的文本,我想要文本包装.

编辑:“如果我从表格标签中删除了wIDth属性,那么我就像[前四个]列的宽度是宽度,但仍然有这个表格是页面宽度的100%.

有任何想法吗? CSS解决方案比较好!

解决方法 您可以使用 flexbox来完成此 *** 作

CSS

table {    wIDth:100%;    border: 1px solID black;    border-collapse: collapse;}td + td {    border-left: 1px solID black;}tr {    display: flex;    align-items: stretch;}td:last-child {    flex: 1;    background: yellow;    display:inline-block;    /* to keep IE happy */}

FIDDLE(调整浏览器窗口的大小可以看到这一点)

table {  wIDth: 100%;  border: 1px solID black;  border-collapse: collapse;}td + td {  border-left: 1px solID black;}td:last-child {  background: yellow;}
<table>  <tr>    <td>One Two Three</td>    <td>Two Three Four</td>    <td>Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five</td>    <td>Four Five Six</td>    <td>&nbsp;f</td>  </tr></table>

注意:

IE 10-11有一个问题,即Inline元素(并且显然是表格单元格)也不会被视为flex-items.

这个问题由Phillip Walton here记录,解决方法(从上述帖子)是:

This issue can be avoIDed by adding a non-inline display value to the
items,e.g. block,inline-block,flex,etc.

Btw:以下是与without using flexbox相同的小提琴 – 请注意,最后一个td实际上并不填满剩余空间,而是占用它自己的自然空间 – 这是OP不想要的.

总结

以上是内存溢出为你收集整理的html – 使表格宽度为100%,最后一列填充余数,而不挤压其他列的内容/宽度全部内容,希望文章能够帮你解决html – 使表格宽度为100%,最后一列填充余数,而不挤压其他列的内容/宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1089886.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存