时间戳

首页 > 解决方案 > 避免显示块时的响应式 HTML 表格

html - 避免显示块时的响应式 HTML 表格

问题描述

当给定足够的空间时，我的table样式可以很好地呈现：

在此处输入图像描述

但是，当父容器的宽度不够宽时，表格会被隐藏：

在此处输入图像描述

我可以通过添加display: block. table这将添加一个水平滚动条：

在此处输入图像描述

但是，当父容器非常宽时，这会导致标头不占用可用空间：

在此处输入图像描述

当父容器太小时，有没有办法让滚动条出现，让标题占用可用空间并保持表格的外观和感觉？

:root {
  --global-title-color: black;
  --global-content-background-color: lightgreen;
  --global-background-color: lightblue;
  --global-border-color: red;
  --global-border-radius: 5px;
  --global-border-width-1: 1px;
  --global-font-size-1: 20px;
  --global-font-weight-bold: bold;
  --global-space-fixed-2: 5px;
  --global-space-fixed-3: 10px;
}

.container {
  display: block;
  background: yellow;
  resize: horizontal;
  overflow: hidden;
  min-height: 150px;
}

table {
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1)
    var(--global-border-width-1);
  border-spacing: 0;
  overflow: auto;
  width: 100%;

  thead {
    th {
      color: var(--global-background-color);
      background-color: var(--global-title-color);
      font-weight: var(--global-font-weight-bold);
      font-size: var(--global-font-size-1);
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: bottom;
    }

    th:first-child {
      border-top-left-radius: var(--global-border-radius);
    }

    th:last-child {
      border-top-right-radius: var(--global-border-radius);
    }
  }

  tbody {
    td {
      border-top: var(--global-border-width-1) solid var(--global-border-color);
      min-width: 100px;
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: top;
    }

    tr:nth-child(2n) {
      background-color: var(--global-background-color);
    }

    tr:last-child {
      td:first-child {
        border-bottom-left-radius: var(--global-border-radius);
      }

      td:last-child {
        border-bottom-right-radius: var(--global-border-radius);
      }
    }
  }
}
<div class="container">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p>
  <table>
    <thead>
      <tr>
        <th>SDK</th>
        <th>Default namespaces</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Microsoft.NET.Sdk</td>
        <td><code class="language-inline-text">System.Collections.Generic</code></td>
      </tr>
      <tr>
        <td>Microsoft.NET.Sdk.Web</td>
        <td><code class="language-inline-text">System.Net.Http.Json</code></td>
      </tr>

    </tbody>
  </table>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p>
</div>

所有代码也可以在下面的 CodePen 中找到：

https://codepen.io/muhammadrehansaeed/pen/JjydLVV?editors=1100

标签： htmlcsshtml-tabledisplay

解决方案

display: block;使用我知道您要避免使用的表尝试此解决方案display: block;，但对于滚动，必须是静态容器。正如你上面提到的：

但是，当父容器非常宽时，这会导致标头不占用可用空间

要解决此问题，您可以设置标题单元格width: 0.1%。

th {
  width: 0.1%;
  white-space: nowrap;
}


:root {
  --global-title-color: black;
  --global-content-background-color: lightgreen;
  --global-background-color: lightblue;
  --global-border-color: red;
  --global-border-radius: 5px;
  --global-border-width-1: 1px;
  --global-font-size-1: 20px;
  --global-font-weight-bold: bold;
  --global-space-fixed-2: 5px;
  --global-space-fixed-3: 10px;
}

.container {
  display: block;
  background: yellow;
  resize: horizontal;
  overflow: hidden;
  min-height: 150px;
}

table {
  display: block;
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1);
  border-spacing: 0;
  overflow: auto;
}

th {
  width: 0.1%;
  white-space: nowrap;
}

th {
  color: var(--global-background-color);
  background-color: var(--global-title-color);
  font-weight: var(--global-font-weight-bold);
  font-size: var(--global-font-size-1);
  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
  vertical-align: bottom;
  white-space: nowrap;
}

th:first-child {
  border-top-left-radius: var(--global-border-radius);
}

th:last-child {
  border-top-right-radius: var(--global-border-radius);
}

td {
  border-top: var(--global-border-width-1) solid var(--global-border-color);
  /* min-width: 100px; /* /* changed */
  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
  vertical-align: top;
}

tr:nth-child(2n) {
  background-color: var(--global-background-color);
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--global-border-radius);
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--global-border-radius);
}
<div class="container">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis
        voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum
        tempore. Quas harum dolores totam voluptatem deserunt et praesentium
        nihil placeat. Voluptas.
      </p>
      <table>
        <thead>
          <tr>
            <th>SDK</th>
            <th>Default namespaces</th>
            <th>Values</th>
            <th>Default</th>
            <th>Other stuff</th>
            <th>#</th>
            <th>SDK</th>
            <th>Namespaces</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Microsoft.NET.Sdk</td>
            <td>
              <code class="language-inline-text"
                >System.Collections.Generic</code
              >
            </td>
            <td>Values</td>
            <td>
              <code class="language-inline-text">Generic</code>
            </td>
            <td>Microsoft.NET.Sdk</td>
            <td>
              <code class="language-inline-text">00</code>
            </td>
            <td>NET.Sdk</td>
            <td>
              <code class="language-inline-text"
                >System.Collections.Generic</code
              >
            </td>
          </tr>
          <tr>
            <td>Microsoft.NET.Sdk.Web</td>
            <td>
              <code class="language-inline-text">System.Net.Http.Json</code>
            </td>
            <td>Web</td>
            <td>
              <code class="language-inline-text">System.Net.Http.Json</code>
            </td>
            <td>Microsoft.NET.Sdk.Web</td>
            <td>
              <code class="language-inline-text">33</code>
            </td>
            <td>Sdk.Web</td>
            <td>
              <code class="language-inline-text">Http.Json</code>
            </td>
          </tr>
        </tbody>
      </table>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis
        voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum
        tempore. Quas harum dolores totam voluptatem deserunt et praesentium
        nihil placeat. Voluptas.
      </p>
    </div>

推荐阅读