使用固定 table 布局的最小列宽

Question

我有一个问题困扰了我很长时间。我正在尝试构建一个重复的 table 设计，其中我有两行包含键值对，然后另一行包含一个列，该列应该跨越上述两列。像这样：

键：值

...等等。

不久，想法是建一个留言墙。

我希望第一个键只占用所需的最小宽度，不多也不少（填充除外）。然后我希望该值填充 space 的其余部分，但它应该在该值之后开始。

我已经设法让键列占据最小宽度，但那没有使用 table-layout:fixed，但这给我带来了其他问题（table 内容超出了父 div 例如）。所以，我想要一个固定的 table 布局，但内容不会流到父 div 之外......我知道我 "fix" 它使用不同的 CSS 取决于观众的屏幕尺寸（为第一列设置特定的宽度）——但这是最好且唯一的（？）解决方案吗？

部分代码：

.divContainer {
  width: 500px;
    border: 2px solid red;
}
.topTable {
  table-layout: fixed;
    width: 100%;

}
td {
    width: auto; 
}
td.tableKey {
    padding-left: 7px;
    width: 1px;
    color: red;
    white-space: nowrap;

}
td.tableValue {
    text-align: left;
    max-width: 200px;
}    
td.tableComment {
       white-space: nowrap;
    word-wrap: break-word;
        white-space: pre-line;
}

<div class="divContainer">
    <table class="topTable">
        <tr>
            <td class="tableKey">Key:</td>
            <td class="tableValue">Value</td>
        </tr>
        <tr>
            <td class="tableKey">Key:</td>
            <td class="tableValue">Value</td>
        </tr>
        <tr>
            <td colspan="2" class="tableComment">This is a dummy messageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeee.</td>
        </tr>
    </table>
</div>

JsFiddle： https://jsfiddle.net/x87mwe4c/1/

任何帮助将不胜感激，或多或少地尝试了一切。提供的代码是 "current" 版本 - 但也尝试了很多其他东西但没有任何成功。

Answer 1

如果您不介意 css 网格解决方案。干得好。我也改变了你的标记。我为非网格浏览器添加了后备 CSS 解决方案。你可以测试它，它有效。我使用了传统的浮动，然后合并了现代浏览器的 css 网格以覆盖旧的 CSS.

您可以分享您的观点。

/*CSS box model reset for different browsers*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*CSS for non grid support browsers*/
.divContainer {
  background: blue;
  /*you can change the size as you wish*/
  width: 500px;
}

.tableKey  {
  background: #ce3;
  float: left;
  /*Set a size for the float css to work*/
  width: 50px;
}

.tableValue {
  float: left;
  /*Occupy the rest of the space minus 50px for the tablekey width*/
  width: calc(100% - 50px);
  background: #a03;
  clear: right;
}

.longContent {
  white-space: nowrap;
  word-wrap: break-word;
  white-space: pre-line;
  /*Let the block take up the next portion down without being floated to left.*/
  clear: both;
}

/*If the browser supports grid then use the CSS below instead of the fallback above. CSS is hierarchical. The CSS below the other is read first. e.g I have overwritten the background of .divContainer in the lines below*/

.divContainer {
  background: cyan;
}

@supports (display: grid) {
  .divContainer {
    display: grid;
    grid-gap: 5px;
    /*Divide the layout into two columns. The first column takes the minimum space it needs but not beyond 50px; While the rest of the remaining space is taken up by the second div.*/
    grid-template-columns: minmax(auto, 50px) 1fr;
  }
  
  /*Introduced width:auto in .tableKey and .tableValue to overwrite the width from the non-grid support css*/
  .tableKey  {
    background: #ce3;
    width: auto;
  }

  .tableValue {
    background: #a03;
    width: auto;
  }
  .longContent {
    /*Span this row by 2 spans of the layout*/
    grid-column: span 2;
    white-space: nowrap;
    word-wrap: break-word;
    white-space: pre-line;
    /*Overwrite clear from the non-grid support */
    clear: none;
  }
}

<div class="divContainer">
  <div class="tableKey">Key:</div>
  <div class="tableValue">Value</div>
  <div class="tableKey">Key:</div>
  <div class="tableValue">Value</div>
  <div class="longContent">This is a dummy messageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeee.</div>
</div>

Answer 2

它可以与 table 一起使用。但现在大多数人只是使用弹性样式。一个例子：

.message-wall {
  margin: 0;
  padding: 0;
  max-width: 500px;
  list-style-type: none;
  
  border: 2px solid red;
}
.message-row {
  display: flex;
}

.comment {
  word-wrap: break-word;
  white-space: pre-line;
}
.tableKey {
  flex: 0 0 0;
  padding-right: 0.5em;
  
  color: red;
}
.tableValue {
  flex: 1 1 0;
}

<ul class="message-wall">
  <li id="message-1">
    <div class="message-row">
      <span class="tableKey">Key:</span>
      <span class="tableValue">Value</span>
    </div>
    <div class="message-row">
      <span class="tableKey">Key:</span>
      <span class="tableValue">Value</span>
    </div>
    <div class="comment">This is a dummy messageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeee</div>
  </li>
</ul>

使用固定 table 布局的最小列宽

Minimum column width using fixed table layout

html

css

html-table

fixed

column-width