How can I set the max-width of a table row?-CodePudding

I need to set max-width of a table-row. My CSS code:

table tr {
    max-width: 1580px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 50px;
    padding-right: 50px;
}

Unfortunately it doesn't work, padding is seen in the browser, but it doesn't push it. Margin and max-width are not even seen in the browser - inspect/computed.

CodePudding user response：

From what I know there are a lot of properties you cannot use with tr element like border and max-width is one of them so you should rather try giving it to td element. And for Properties that works with tr like background it does not apply to tr itself it applies to all its children. FOR EXAMPLE -

tr{
  background: cyan;
}

<table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
 </table>

In the above code instead bg being applied to all of the row it applies to all children of the element

CodePudding user response：

Try this out!

tr {
    max-width: 1580px;
    width:100%
}