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

您可以使用

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;

}

One Two Three

Two Three Four

Three Four FiveThree Four FiveThree Four FiveThree Four FiveThree Four Five

Four Five Six

f

注意：

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不想要的.