Question

我尝试创建一个包含三列的HTML表，并希望将两列的宽度（在本例中为第一列和第三列）设置为“自动”（适合其内容的宽度）。我希望第三列（中间一列）占用其余空间。

如果中间列的内容比中间列的剩余宽度窄，但是如果内容的宽度比该列的宽度多于我得到的表格溢出，这会很好。

即使中间栏中有较长的文字，也有办法实现吗？（所需行为：如有必要，“剪切”中间列的文本）。

{{1}}

Answer 1

不要以为有一种方法可以使用表格。如果您有需要，可以使用flex。

.fake_table {
  width: 150px;
  padding: 5px;
  display: flex;
  background-color:orange;
}

.row {
    display: flex;
    box-sizing: border-box;
    background-color: pink;
    width: 100%;
}

.col1, .col3 { flex: 1; }
.col2 { overflow: hidden; }
  
.col1 { background-color:red}
.col2 { background-color:yellow; }
.col3 { background-color:green }

<div class="fake_table">
  <div class="row">
    <div class="col1">123456</div>
    <div class="col2">1234567890123</div>
    <div class="col3">123456</div>
  </div>
</div>

Answer 2

我找到了！解决方案是浮点和溢出的组合，而不是表：

<div style="background-color:orange; width:200px !important; padding: 5px">
    <div style="background-color: pink">
        <div style="background-color:red; float:left">
            123456
        </div>
        <div style="background-color:green; float:right">
            123456
        </div>
        <div style="background-color:yellow; overflow:hidden">
            1234567890123456
        </div>
    </div>
</div>

避免HTML表溢出

2 个答案: