如何在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">