Set width for table columns-CodePudding

I have a table

<div >
<table>
    <th colspan="2">Title:</th>
    <tr>
    <td>Harry Potter</td>
    <td >$10</td>
    </tr>
    <th colspan="2">Title:</th>
    <tr>
    <td>Harry Potter</td>
    <td >$10</td>
    </tr>
</table>
</div>

table {
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
}

td {
    border: solid 1px black;
    padding: 10px;
    width: 100%;
}

.width1200 {
    width: 1200px;
    padding: 10px;
}

.td100 {
    width: 100px;
}

I need to make 3 things:

The width of the table

On big screens it should be 1200 px
The table should be 100% width
The table should be responsive

Width of td

Second td should always be fixed - 100px
First td shoul be 100% of the free and responsive

At the moment the table width 100% doesn't work

CodePudding user response：

Here is the right one:

php code refactored ( wrong markup inside table )

<div >
  <table>
    <thead>
    <tr>
      <th>Title:</th>
      <th >Price:</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Harry Potter</td>
      <td >$10</td>
    </tr>

    <tr>
      <td>Harry Potter</td>
      <td >$10</td>
    </tr>
    </tbody>

  </table>
</div>

and new css code:, set width and max width to table and set only to cells with class td100 the specific with

table {
    border-collapse: collapse;
    width: 100%;
  }

  td {
    border: solid 1px black;
    padding: 10px;
  }

  .width1200 {
    max-width: 1200px;
    width:100%;
    padding: 10px;
  }

  .td100 {
    width: 100px;
  }

CodePudding user response：

You're contradicting yourself. I think you mean to say that on a big screen the table should have a maximum width of 1200px. Right?

<style>

table {
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
}

td {
    border: solid 1px black;
    padding: 10px;
}

.width1200 {
    max-width: 1200px;
    padding: 10px;
}

.td100 {
    width: 100px;
}

</style>

I changed width: 1200px; to max-width: 1200px; and removed width: 100%; from the td styling. I did not change the HTML.

I think now it does what you want?

See: Example

CodePudding user response：

table-layout: fixed allows you to set the widths of columns explicitly. The requirement is that the widths must be set on the <th> or <td> of the first <tr>. The OPs first <tr> has col="2" making it impossible to set a width for the second column. A workaround:

is to add another <tr> at the top
add 2 cells <th> and/or <td>
do not style any borders to the row
do not add any content to the new row either
add to the 2nd cell of the new hidden row.

BTW each colspan="2" isn't in a <tr> in OP. They are added in this example.

table {
  border-collapse: collapse;
  table-layout: fixed;/* IMPORTANT */
  width: 100%;
}

td {
  border: solid 1px black;
  padding: 10px;
}

.width1200 {
  width: 1200px;
  padding: 10px;
}

.td100 {
  width: 100px;
}

<div >
  <table>
    <tr><!--NEW-->
      <th></th>
      <th ></th><!--100px column-->
    </tr><!--ROW-->
    <tr>
      <th colspan="2">Title:</th>
    </tr>
    <tr>
      <td>Harry Potter</td>
      <td>$10</td>
    </tr>
    <tr>
      <th colspan="2">Title:</th>
    </tr>
    <tr>
      <td>Harry Potter</td>
      <td >$10</td>
    </tr>
  </table>
</div>