响应 HTML Table 同时避免显示块

Question

我有一个 table 样式，当它足够多时渲染效果很好 space:

然而，当 parent 容器的宽度不够宽时 table 被隐藏：

我可以通过在 table 上添加 display: block 来解决这个问题。这将添加一个水平滚动条：

但是，当 parent 容器非常宽时，这会导致 header 无法占用可用的 space：

有什么方法可以在 parent 容器太小时让滚动条出现，让 header 占用可用的 space 并保持外观和感觉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

Answer 1

您可以删除 table 上的 display: block; 并在 .container 上将 overflow: hidden; 替换为 overflow: auto;。

: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: auto;
  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">

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

Answer 2

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

However, this causes the header to not take up available space when the parent container is very wide

要解决此问题，您可以设置 header 单元格 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>

响应 HTML Table 同时避免显示块

Responsive HTML Table While Avoiding Display Block

html

css

html-table

display