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

概述有可能使一个表(它将动态创建文本)具有例如： 桌面宽度为屏幕的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％,最后一列填充余数,而不挤压其他列的内容/宽度所遇到的程序开发问题。

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