使用固定表格布局的最小列宽

Question

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

键：值

键：值

评论

键：值

键：值

评论

...等等。

简而言之，这个想法是建立一个消息墙。

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

我已经设法让键列占据最小宽度，但没有使用table-layout:fixed，但这给我带来了其他问题（例如，表格内容超出了父 div）。所以，我想有一个固定的表格布局，但内容不会在父 div 之外流动......我知道我根据观众的屏幕尺寸使用不同的 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/

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

Answer 1

如果您不介意 css Grid 解决方案。干得好。我也把你的标记改了。我为非网格浏览器添加了一个备用 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

它可以与桌子一起使用。但现在大多数人只使用 flex 样式。一个例子：

.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>