The width of the table in the div exceeds the width of the div
First pay attention to a style of table
table
{
table-layout:fixed;
}The tableLayout property is used to set the display properties of table cells, rows, and columns.
table-layoutThere are the following values:
| value | description |
|---|---|
| automatic | default. Column width is set by cell content |
| fixed | The column width is set by the table width and the column width. |
| inherit | Specifies that the value of the table-layout attribute should be inherited from the parent element. |
When the width of the table exceeds the width of the div surrounding it, you should generally check the element attributes in the browser first, and try to modify or cancel to observe the style change. In terms of my actual situation, I finally found that the width of the table is related to the element.style property of the table and the width property of the cell content. This is the most critical place. Once the source is found, the problem is not difficult to solve.
The width of the cell content is easy to modify here, but I do n’t know where the element.style attribute is from. With the help of the Internet, I learned that the element.style attribute is an inline style. Use! Important syntax priority to achieve the effect we want.
It turned out to be this style:
element.style {
width: 197px;
}The width is too large, I want to set the automatic width. as follows:
.table th{
width: auto ! important;
}So the problem is solved.
