'Set width for table columns

I have a table

<div class="width1200">
<table>
    <th colspan="2">Title:</th>
    <tr>
    <td>Harry Potter</td>
    <td class="td100">$10</td>
    </tr>
    <th colspan="2">Title:</th>
    <tr>
    <td>Harry Potter</td>
    <td class="td100">$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:

  1. The width of the table
  • On big screens it should be 1200 px
  • The table should be 100% width
  • The table should be responsive
  1. 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

htmlcssphpmysqlunity3dnamespacesserver-error


Solution 1:[1]

Here is the right one:

php code refactored ( wrong markup inside table )

<div class="width1200">
  <table>
    <thead>
    <tr>
      <th>Title:</th>
      <th class="td100">Price:</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Harry Potter</td>
      <td class="td100">$10</td>
    </tr>

    <tr>
      <td>Harry Potter</td>
      <td class="td100">$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;
  }

Solution 2:[2]

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 class="td100" 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 class="width1200">
  <table>
    <tr><!--NEW-->
      <th></th>
      <th class="td100"></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 class="td100">$10</td>
    </tr>
  </table>
</div>

Solution 3:[3]

Well, first of all your tutorial seems to be quite old (Unity 2017).

Even then there is and never was a namespace called UnityEngine.UnityWebRequest.

UnityWebRequest is and has always been in the namespace UnityEngine.Networking.

So

using UnityEngine.UnityWebRequest;

makes no sense and if anything it should rather be

using UnityEngine.Networking;

Besides that you should not use the deprecated WWW (which btw anyway is and was directly in the namespace UnityEngine) anymore at all but rather UnityWebRequest.Post

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Codeschreiber.de
Solution 2 zer00ne
Solution 3

Related Questions