如何修復html 5中的表格寬度？

Question

檢查此圖像：

https://ibb.co/MhtZLpG

問題出在我的表中，我表的最后一列不在屏幕上

我試過了

<table style="width:200px !important">

和

<table style="width:20% !important">

但它沒有用。

Answer 1

您需要明確設置table-layout ：

table {
  table-layout: fixed;
}

然后，您可以設置列寬：

th:nth-child(<<the number of which column you want to set the width>>) {
  width: <<your desried width>>
}

如果你想設置表格寬度占據全寬，那么只需設置：

table {
  table-layout: auto;
}

你想要做的是像這樣：

table {
  table-layout: fixed;
  width: 20%;
}

使用內聯，以下將起作用：

<table style="width:20%; table-layout: fixed;">

---

這是 bootstrap 4 附帶的寬度類：

w-25 /* width: 25%; */
w-50 /* width: 50%; */
w-75 /* width: 75%; */
w-100 /* width: 100%; */

你可以申請到你的桌子上上課。 例如。 class="w-25"

您還可以應用列類 - col-* ：

<table class="col-3">