如何在html 5中修复表格宽度？

Question

Check this image:

https://ibb.co/MhtZLpG

The problem is in my table my last column of my table is off the screen

I have tried

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

and

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

but it didn't work.

Answer 1

You will need to set the table-layout explicitly:

table {
  table-layout: fixed;
}

Then, you can set the column width:

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

And if you want to set the table width occupy the full width, then just set:

table {
  table-layout: auto;
}

What you're trying to do is to make like:

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

Using inline, the following will work:

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

---

Here's the width classes that bootstrap 4 comes with:

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

To which you can apply to your table for the class. For eg. class="w-25"

You can also apply the column classes - col-*:

<table class="col-3">