我正在嘗試增加并排表格的大小以適應整個頁面，但它不起作用我將其添加style="width: 50%" 到每個表格中，但它顯示了一行中的第一個表和另一行中的第二個表，我想要它們水平放置并適合整個頁面
<table style="float: left">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table style="float: left">
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
uj5u.com熱心網友回復：
您可以通過添加 display: flex; 來實作這一點。在父元素中。
<div style="display: flex;">
<table style="width:100%;">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table style="width:100%;">
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
</div>
uj5u.com熱心網友回復：
- 將兩個表格放在另一個表格的單元格中。或者
- 組合樣式寬度 - 可能是 45% 45 % 等。或者
- 以像素為單位設定表格寬度，但不以百分比為單位。這樣一來，您的網站將無法適應所有設備和顯示幕。
uj5u.com熱心網友回復：
有多種方法可以實作這一點。在我看來，最好的兩種方法如下：
<div style="display: flex">
<table style="flex-grow: 1">
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table style="flex-grow: 1">
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
</div>或者：
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
<table>
<thead>
<tr>
<th>A</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>200</td>
</tr>
</tbody>
</table>
</div>對于這些示例中的任何一個，如果您想在這兩個表格之間添加一些間距，您可以使用gapdiv 上的 CSS 屬性，如下所示：gap: 1 rem
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/516327.html
標籤：html有角度的