Question

我正在尝试将相同的宽度设置为tbody和thead的列。我需要tbody可滚动，thead冻结，列数不固定......！我谷歌很多相同.... 我试过的一些代码片段......

首先例如 对于thead和tbody，我设置了单独的div和table。在这里，我设置了thead style="display:block;"。

<div style="border:solid;border-color:red;" >
 <div style="border:solid;">
  <table border="1" width="100%">
        <thead style="background-color:red;display:block">
                <tr>
                        <th style="width:40%"><span>Fruits</span></th>
                        <th style="width:40%"><span>Vitamin A</span></th>
                        <th style="width:40%"><span>Vitamin C</span></th>
                </tr>
        </thead>
</table>
</div>
<div style="height:80px; overflow:auto;border:solid;border-color:yellow;">
<table border="1" width="100%">

        <tbody>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
                <tr>
                        <th>Bananas</th>
                        <td>76 ui</td>
                        <td>10.3 mg</td>
                </tr>
                <tr>
                        <th>Apples</th>
                        <td>98 ui</td>
                        <td>8.4 mg</td>
                </tr>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
        </tbody>
</table>
</div>

第二个例如 在这里，我为div和table设置相同的thead和tbody，thead position:fixed

     <div style="border:solid;overflow:scroll;height:80px">
      <table border="1" width="100%">
            <thead style="background-color:red;position:fixed;">
                    <tr>
                            <th>Fruits</th>
                            <th>Vitamin A</th>
                            <th>Vitamin C</th>
                    </tr>
            </thead>
            <tbody>
                    <tr>
                            <th>Apples</th>
                            <td>98 ui</td>
                            <td>8.4 mg</td>
                    </tr>
                    <tr>
                            <th>Oranges</th>
                            <td>295 ui</td>
                            <td>69.7 mg</td>
                    </tr>
                    <tr>
                            <th>Oranges</th>
                            <td>295 ui</td>
                            <td>69.7 mg</td>
                    </tr>
                    <tr>
                            <th>Bananas</th>
                            <td>76 ui</td>
                            <td>10.3 mg</td>
                    </tr>
                    <tr>
                            <th>Apples</th>
                            <td>98 ui</td>
                            <td>8.4 mg</td>
                    </tr>
    
            </tbody>
    </table>
    </div>

任何人都面临同样的问题......？

感谢。

Answer 1

尝试使用此代码以获得相同的宽度：

＆＃13;

div {
  float: left;
  width: 100%;
}
table {
  float: left;
  width: 100%;
}
thead {
  background-color: red;
  display: block;
  float: left;
  width: 98%;
}
tr {
  float: left;
  width: 100%;
}
th, td {
  float: left;
  text-align: center;
  width: 32.6% !important;
}
span {
  word-wrap: break-word;
}

＆＃13;

<div style="border:solid;border-color:red;" >
 <div style="border:solid;background-color: red;">
  <table border="1" width="100%">
        <thead style="background-color:red;display:block">
                <tr>
                        <th style="width:40%"><span>Fruits Fruits Fruits Fruits Fruits Fruits Fruits Fruits</span></th>
                        <th style="width:40%"><span>Vitamin A Vitamin A Vitamin A Vitamin A </span></th>
                        <th style="width:40%"><span>Vitamin C Vitamin C Vitamin C Vitamin C </span></th>
                </tr>
        </thead>
</table>
</div>
<div style="height:80px; overflow:auto;border:solid;border-color:yellow;">
<table border="1" width="100%">

        <tbody>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
                <tr>
                        <th>Bananas</th>
                        <td>76 ui</td>
                        <td>10.3 mg</td>
                </tr>
                <tr>
                        <th>Apples</th>
                        <td>98 ui</td>
                        <td>8.4 mg</td>
                </tr>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
        </tbody>
</table>


</div>

＆＃13;

Answer 2

在样式标记中尝试此操作：

thead th,tbody td{
  width: 10%;//or what you want
  float:left;
}

如何设置动态生成的thead和tbody列的相同宽度

2 个答案: