min-width 属性不适用于表格的单元格？答案

【问题标题】：min-width property is not working on table"s cell?min-width 属性不适用于表格的单元格？
【发布时间】：2021-06-23 07:33:59
【问题描述】：

我正在尝试为表格单元格提供最小宽度并希望水平滚动但最小宽度在这里不起作用，有人可以帮忙吗？我见过this comment also on stack overflow，但它并没有解决我的问题。代码是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   div{
      
       width: 50%;
       overflow-x: scroll;
       border: 1px solid red;
   }
    table{
        table-layout: fixed;
        border: 1px solid black;
        width: 100%; 
    }
    th,td{
        border: 1px solid black;
        
        min-width: 1000px;
        
    }
  
</style>
<body>
    <div>
    <table>
        <tr>
            <th>nb b </th>
            <th>agahbajh gae</th>
            <th>nbb </th>
            <th>agahajh gae</th>
        </tr>
        <tr>
            <td>amame ban</td>
            <td>20</td>
            <td>amame ban</td>
            <td>20</td>
        </tr>
        <tr>
            <td>aahshu</td>
            <td>23</td>
            <td>aaajshu</td>
            <td>23</td>
        </tr>
    </table>
</div>

    

</body>
</html>

更新：-@Emaro 已经回答了我的问题。现在我想知道如果我想给宽度 4 col 怎么办。 as :- 40%,40%,50%,50% 的外部 div。
谢谢

【问题讨论】：

标签： html css

【解决方案1】：

如果您将表格限制为 100%，您将无法水平滚动它。将其更改为auto，它应该可以工作（如果我理解正确的话）。

div {
   width: 50%;
   overflow-x: scroll;
   border: 1px solid red;
}

table {
    table-layout: fixed;
    border: 1px solid black;
    width: auto; /* 100% is relative to the parent div */
}

th, td {
    border: 1px solid black;
    min-width: 1000px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div>
    <table>
        <tr>
            <th>nb b </th>
            <th>agahbajh gae</th>
            <th>nbb </th>
            <th>agahajh gae</th>
        </tr>
        <tr>
            <td>amame ban</td>
            <td>20</td>
            <td>amame ban</td>
            <td>20</td>
        </tr>
        <tr>
            <td>aahshu</td>
            <td>23</td>
            <td>aaajshu</td>
            <td>23</td>
        </tr>
    </table>
</div>

</body>
</html>

【讨论】：

如果我想以百分比形式为每个单元格指定宽度怎么办？我怎样才能做到这一点？像 4 cols 应该是：-40%,40% 50%,50% 的外部 div？