隱藏 html 表中的列而不是在 x 軸上顯示 scollbar？

Question

我有一個這樣的 HTML 表格：

<div style="overflow: auto>
<table id="tableId">
    <thead>
        <tr><th>Header1</th></tr>
        <tr><th>Header2</th></tr>
        <tr><th>Header3</th></tr>
        <tr><th>Header4</th></tr>
    </thead>
    <tbody>
        <tr><td>Some text1</td></tr>
        <tr><td>Some text2</td></tr>
        <tr><td style="white-space: nowrap;">Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</td></tr>
        <tr><td>Some text4</td></tr>
    </tbody>
</table>
</div>

目前，如果第三列的內容太大，表格會溢出。 我想做的是隱藏第三列，如果它太大以至於在 x 軸上導致溢出（並因此顯示滾動條）。 我不想使用媒體查詢，因為任何顯示尺寸都可能發生溢出。

我如何使用 Javascript 和/或 CSS 實現這一點？ 我們正在使用 Bootstrap，所以如果它可以提供幫助，那也是一個可行的解決方案。 請注意，我仍然需要 y 軸上的滾動條。

Answer 1

您可以對該 tr 使用overflow-x屬性，要啟用 overflow 屬性，您需要將 minWidth 傳遞給該元素

<div style="overflow: auto>
<table id="tableId">
    <thead>
        <tr><th>Header1</th></tr>
        <tr><th>Header2</th></tr>
        <tr><th>Header3</th></tr>
        <tr><th>Header4</th></tr>
    </thead>
    <tbody>
        <tr><td>Some text1</td></tr>
        <tr><td>Some text2</td></tr>
        <tr><td style="white-space: nowrap; ">
                  <div style="width: 100px; overflow-x: auto;">
                     Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text
                  </div>
               </td></tr>
    </tbody>
</table>
</div>

Answer 2

雖然這沒有回答我相信你的表格的 HTML 應該更像這樣的問題，不是嗎？

否則你有全寬標題和不垂直對齊的列，這就是我假設大多數開發人員編碼將要顯示給人類用戶的表格時想要顯示它的方式？

你的代碼

 <div style="overflow: auto"> <:-- you have a typo here btw - missing " --> <table id="tableId"> <thead> <tr><th>Header1</th></tr> <tr><th>Header2</th></tr> <tr><th>Header3</th></tr> <tr><th>Header4</th></tr> </thead> <tbody> <tr><td>Some text1</td></tr> <tr><td>Some text2</td></tr> <tr><td style="white-space; nowrap;">Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</td></tr> <tr><td>Some text4</td></tr> </tbody> </table> </div>

通過減少 TR 數量進行修改

 <div style="overflow: auto"> <table id="tableId"> <thead> <tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> </tr> </thead> <tbody> <tr> <td>Some text1</td> <td>Some text2</td> <td style="white-space: nowrap;overflow: hidden;">Some veryy very very very very very very very very very very very very very very very very very very very very very very very very very very very long text</td> <td>Some text4</td> </tr> </tbody> </table> </div>