HTML 表格 - 使单列响应

Posted 2023-03-06

【中文标题】HTML 表格 - 使单列响应

【英文标题】：HTML table - making a single column responsive

【发布时间】：2021-04-23 17:18:09

【问题描述】：

如何使“描述”列具有响应性？如您所见，引导描述正在推动我的网站。我希望描述具有特定宽度，文本位于“语言”后面，并且所有描述列只有一个水平滚动条。

顺便说一句，我正在使用引导程序，因此代码不包含 css，但它可能对您有所帮助:)

       <div className="table-responsive-lg">
          <table className="table table-hover text-nowrap">
              <thead>
                <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Description</th>
                  <th scope="col">Language</th>
                  <th scope="col">Date Created</th>
                  <th scope="col">File Size (kb)</th>
                  <th scope="col">Open Issues</th>
                </tr>
              </thead>
              <tbody>data.map(item => (
                <tr key=item.id>
                  <td><a href=item.html_url>item.name</a></td>
                  <td>item.description</td>
                  <td>item.language</td>
                  <td>item.created_at.slice(0,10)</td>
                  <td>item.size</td>
                  <td>item.open_issues</td>
                </tr>
              ))</tbody>
            </table>
        </div>

【参考方案1】：

您可以使用一些 CSS 定义一个类，如下所示：

.fixed-width 
  width: 400px;
  display: block;
  overflow-x: auto; 

然后将fixed-width 类添加到“描述”列中的所有<th> 和<td> 标记中。

【讨论】：

有效！ :) 但我在整个描述列中寻找 1 个单横条，你的建议给了我每个

的水平滚动条，所以我将它修改为 overflow-x:auto; 但仍然给我每个溢出的单独的横条 你知道解决办法吗？

@helpmeplease 我认为仅使用纯 CSS 无法做到这一点。这里我用rowspan写了一个例子：jsfiddle.net/nq0g1z3f/1（你需要添加一些CSS来使div标签看起来像td）。希望对您有所帮助。

【参考方案2】：

使用这个 CSS。

.table border-collapse:collapse; table-layout:fixed; width:310px;
.table td width:100px; /*add as per your requirements*/ word-wrap:break-word;

使用子伪或唯一 ID 或类。 根据屏幕需要设置。使用@media。

【参考方案3】：

我稍微修改了之前的答案，只在包含描述的列上添加了.fixed-width类

.fixed-width 
  max-width: 400px;
  display: block;
  overflow-x: scroll; 

  <div className="table-responsive-lg">
          <table className="table table-hover text-nowrap">
              <thead>
                <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Description</th>
                  <th scope="col">Language</th>
                  <th scope="col">Date Created</th>
                  <th scope="col">File Size (kb)</th>
                  <th scope="col">Open Issues</th>
                </tr>
              </thead>
              <tbody>
                <tr key="1">
                  <td><a href="www.google.com">Google</a></td>
                  <td  class="fixed-width">some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong description here</td>
                  <td>English</td>
                  <td>19/01/2021</td>
                  <td>38</td>
                  <td>5</td>
                </tr>
              </tbody>
            </table>
        </div>

【参考方案4】：

你可以像这样定义你的css：

tbody tr td:nth-child(2) 
    width: 245px;
    overflow-x: scroll;
    max-width: 245px;