Question

我有一个问题，我已经挣扎了很长一段时间了。我试图构建一个重复的表设计，其中我有两行键值对，然后另一行有一列，应该跨越上面两列。像这样：

键：值

注释

键：值

注释

......等等。

很快，我们的想法是建立一个消息墙。

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

我设法让关键列占用最小宽度，但这没有使用table-layout:fixed，但这带来了其他问题（例如，表格内容超出了父div）。所以，我希望有一个固定的表格布局，但内容不在父div之外...我知道我＆＃34;修复＆＃34;它根据观众的屏幕尺寸使用不同的CSS（设置第一列的特定宽度） - 但这是最佳和唯一的（？）解决方案吗？

部分代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

任何帮助都会受到赞赏，或多或少地尝试了一切。提供的代码是＆＃34; current＆＃34;版本 - 但尝试了很多其他的东西，但没有任何成功。

Answer 1

如果您不介意使用css Grid解决方案。干得好。我也改变了你的标记。我为非网格浏览器添加了一个后备CSS解决方案。你可以测试它，它的工作原理。我使用了传统的浮点数，然后将css网格合并到现代浏览器中以覆盖旧的CSS。

您可以分享您的观点。

＆＃13;

/*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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

它可以用于表格。但是大多数人现在只使用弹性造型。一个例子：

＆＃13;

.message-wall {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  width: 500px;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
}
.message-wall > li > div {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.tableKey {
  display: flex;
  flex-direction: row;
  padding-left: 7px;
  background-color: blue;
}
.tableValue {
  width: 100%;
  background-color: red;
}
.comment {
  word-wrap: break-word;
  white-space: pre-line;
  background-color: yellow;
}

＆＃13;

<ul class="message-wall">
  <li id="message-1">
    <div>
      <span class="tableKey">Key:</span>
      <span class="tableValue">Value:</span>
    </div>
    <div class="comment">fsdfsdfdfsd</div>
  </li>
  <li id="message-2">
    <div>
      <span class="tableKey">Key:</span>
      <span class="tableValue">Value:</span>
    </div>
    <div class="comment">fsdfsdfdfsd</div>
  </li>
</ul>

＆＃13;

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

2 个答案: