How to restrict width div element into table element-CodePudding

I have css file

table {
  border: 1px solid;
  width: 400px;
}

And i have html file

<link rel="stylesheet" href="mytablediv.css">
<table><tr><td>table</td></tr></table>
<table><tr><td><div style="width:1000px;">div</div></td></tr></table>

I can't change html file but i can change css file.

How to restrict width div element into table element and make it 400px?

I tried div{ max-width:100% !important;} and it dont't work. Width of table with div is 1000px but i need 400 px.

CodePudding user response：

Just limit the max-width with max-width: 400px

table {
  border: 1px solid red;
}

div {
  border: 1px dashed blue;
  max-width: 400px;
}

<table>
  <tr>
    <td>table</td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <div style="width:1000px;">div</div>
    </td>
  </tr>
</table>

CodePudding user response：

Its just a valid solution, because you cant change the html!

table div {  width: 100% !important; }