我使用 Bootstrap 創(chuàng)建了兩個表，它們的內(nèi)容量相似。盡管如此，這兩個不同的表并沒有正確對齊。我希望這些表的列能夠像 MS Excel 中那樣正確對齊。顯示問題的代碼和圖片如下：<div class="container-fluid"> <table class="table table-striped table-dark"> <h1 class="table-headers">Education</h1> <thead> <tr> <th scope="col">#</th> <th scope="col">School</th> <th scope="col">Years</th> <th scope="col">Program</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Hacettepe University, Ankara</td> <td>2010-2014</td> <td>BA, Composition and Orchestral Conducting</td> </tr> <tr> <th scope="row">2</th> <td>Istanbul Technical University</td> <td>2015-2020</td> <td>Ph.D.(c), Orchestral Conducting</td> </tr> </tbody> </table> <table class="table table-striped table-dark"> <h1 class="table-headers">Experience</h1> <thead> <tr> <th scope="col">#</th> <th scope="col">Institution</th> <th scope="col">Years</th> <th scope="col">Position</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Hacettepe University, Ankara</td> <td>2014-2015</td> <td>Intern</td> </tr> <tr> <th scope="row">2</th> <td>Istanbul Technical University</td> <td>2015-2020</td> <td>Research Assistant</td> </tr> </tbody> </table></div>
2 回答
墨色風(fēng)雨
TA貢獻(xiàn)1853條經(jīng)驗 獲得超6個贊
您可以為此設(shè)置列寬：
table?th?{width:?10%}
table?td?{width:?30%}順便說一句，您不能在表格內(nèi)使用標(biāo)題，而是可以使用caption元素并根據(jù)需要設(shè)置其樣式。
所以你的表可以看起來像這樣：
table th {width: 10%}
table td {width: 30%}
table caption {font-size: 2em; caption-side: top;}
<link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid">
? <table class="table table-striped table-dark">
? ? <caption class="table-headers">Education</caption>
? ? <thead>
? ? ? <tr>
? ? ? ? <th scope="col">#</th>
? ? ? ? <th scope="col">School</th>
? ? ? ? <th scope="col">Years</th>
? ? ? ? <th scope="col">Program</th>
? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? <tr>
? ? ? ? <th scope="row">1</th>
? ? ? ? <td>Hacettepe University, Ankara</td>
? ? ? ? <td>2010-2014</td>
? ? ? ? <td>BA, Composition and Orchestral Conducting</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <th scope="row">2</th>
? ? ? ? <td>Istanbul Technical University</td>
? ? ? ? <td>2015-2020</td>
? ? ? ? <td>Ph.D.(c), Orchestral Conducting</td>
? ? ? </tr>
? ? </tbody>
? </table>
? <table class="table table-striped table-dark">
? ? <caption class="table-headers">Experience</caption>
? ? <thead>
? ? ? <tr>
? ? ? ? <th scope="col">#</th>
? ? ? ? <th scope="col">Institution</th>
? ? ? ? <th scope="col">Years</th>
? ? ? ? <th scope="col">Position</th>
? ? ? </tr>
? ? </thead>
? ? <tbody>
? ? ? <tr>
? ? ? ? <th scope="row">1</th>
? ? ? ? <td>Hacettepe University, Ankara</td>
? ? ? ? <td>2014-2015</td>
? ? ? ? <td>Intern</td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <th scope="row">2</th>
? ? ? ? <td>Istanbul Technical University</td>
? ? ? ? <td>2015-2020</td>
? ? ? ? <td>Research Assistant</td>
? ? ? </tr>
? ? </tbody>
? </table>
</div>
慕標(biāo)5832272
TA貢獻(xiàn)1966條經(jīng)驗 獲得超4個贊
為此，您需要將所有內(nèi)容放入一張表中：
table {
width: 100%;
}
<div class="container-fluid">
<table class="table table-striped table-dark">
<h1 class="table-headers">Education</h1>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">School</th>
<th scope="col">Years</th>
<th scope="col">Program</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hacettepe University, Ankara</td>
<td>2010-2014</td>
<td>BA, Composition and Orchestral Conducting</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Istanbul Technical University</td>
<td>2015-2020</td>
<td>Ph.D.(c), Orchestral Conducting</td>
</tr>
</tbody>
<h1 class="table-headers">Experience</h1>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Institution</th>
<th scope="col">Years</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hacettepe University, Ankara</td>
<td>2014-2015</td>
<td>Intern</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Istanbul Technical University</td>
<td>2015-2020</td>
<td>Research Assistant</td>
</tr>
</tbody>
</table>
</div>
PS：你所擁有的與CSS表格無關(guān)，而是常規(guī)的HTML表格。
- 2 回答
- 0 關(guān)注
- 231 瀏覽
添加回答
舉報
0/150
提交
取消