CODEWITHSUNDEEP
htmlcss
Owen
Owen

Reputation: 81

How can I automatically re-size standard table cells to fit header cells within the table's width?

My code displays a table. Each table row starts with a header cell, followed by a standard cell.

SOME table rows contain an additional header cell which follows the standard cell.

I want to automatically re-size standard cells IF there is a header cell that follows them. I want each table row to fit inside of the table's width boundary.

I don't want the header cells to be re-sized, only the standard cells in order to fit the header cells in the table row.

This is what the table looks like

This is what I want it to look like

Only the standard cell gets re-sized to fit the following header cell in order to match the width of the other rows in the table.

<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
        body {
            color: #FFF;
            font-family: 'Open Sans', sans-serif;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        }

        table {
            border-collapse: collapse;
            font-size: 25px;
            margin: auto;
            width: 500px;
        }

        th,
        td {
            border: 1px solid black;
            height: 50px;
            padding: 5px;
            text-align: center;
        }

        th {
            background-color: #8000FF;
            color: #FFF;
            width: 50px;
        }

        td {
            width: 350px;
        }

        table tr:nth-child(odd) td {
            background-color: #FF8000;
        }

        table tr:nth-child(even) td {
            background-color: #00FF80;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <th>18</th>
                <td>LqtgHRqNcW</td>
            </tr>
            <tr>
                <th>91</th>
                <td>BhydHJUADT</td>
            </tr>
            <tr>
                <th>85</th>
                <td>frvFQoRUuC</td>
                <th>5214</th>
            </tr>
            <tr>
                <th>06</th>
                <td>tIfFHLblmN</td>
                <th>8808</th>
            </tr>
            <tr>
                <th>49</th>
                <td>HMPbrfKYcN</td>
            </tr>
            <tr>
                <th>68</th>
                <td>mMxIjEQMgD</td>
            </tr>
            <tr>
                <th>39</th>
                <td>dDFSkkkLww</td>
            </tr>
            <tr>
                <th>57</th>
                <td>vMvOZYyLIB</td>
                <th>3235</th>
            </tr>
            <tr>
                <th>12</th>
                <td>AKWQsKDNpr</td>
            </tr>
            <tr>
                <th>58</th>
                <td>oCNXiRSwOO</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

https://jsfiddle.net/yb1hcy7q/

How can I automatically re-size standard table cells to fit header cells within the table's width?

Thank you for reading my question, I'd appreciate all the help I can get.

Upvotes: 0

Views: 60

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106078

You need the attribute colspan https://jsfiddle.net/yb1hcy7q/1/

See: https://www.w3.org/wiki/HTML/Elements/td

body {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
table {
  border-collapse: collapse;
  font-size: 25px;
  margin: auto;
  width: 500px;
}
th,
td {
  border: 1px solid black;
  height: 50px;
  padding: 5px;
  text-align: center;
}
th {
  background-color: #8000FF;
  color: #FFF;
  width: 50px;
}
td {
  width: 350px;
}
table tr:nth-child(odd) td {
  background-color: #FF8000;
}
table tr:nth-child(even) td {
  background-color: #00FF80;
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<table>
  <tbody>
    <tr>
      <th>18</th>
      <td colspan="2">LqtgHRqNcW</td>
    </tr>
    <tr>
      <th>91</th>
      <td colspan="2">BhydHJUADT</td>
    </tr>
    <tr>
      <th>85</th>
      <td>frvFQoRUuC</td>
      <th>5214</th>
    </tr>
    <tr>
      <th>06</th>
      <td>tIfFHLblmN</td>
      <th>8808</th>
    </tr>
    <tr>
      <th>49</th>
      <td colspan="2">HMPbrfKYcN</td>
    </tr>
    <tr>
      <th>68</th>
      <td colspan="2">mMxIjEQMgD</td>
    </tr>
    <tr>
      <th>39</th>
      <td colspan="2">dDFSkkkLww</td>
    </tr>
    <tr>
      <th>57</th>
      <td>vMvOZYyLIB</td>
      <th>3235</th>
    </tr>
    <tr>
      <th>12</th>
      <td colspan="2">AKWQsKDNpr</td>
    </tr>
    <tr>
      <th>58</th>
      <td colspan="2">oCNXiRSwOO</td>
    </tr>
  </tbody>
</table>

to size each columns using table-layout: use 

 <colgroup>
    <col class="th"/>
    <col />
    <col class="th"/>
 </colgroup>

( demo https://jsfiddle.net/yb1hcy7q/4/ or snippet below )

body {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 25px;
  margin: auto;
  width: 500px;
}

th,
td {
  border: 1px solid black;
  height: 50px;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #8000FF;
  color: #FFF;
}
col {
  
}
col.th {
  width:3em;
}

table tr:nth-child(odd) td {
  background-color: #FF8000;
}

table tr:nth-child(even) td {
  background-color: #00FF80;
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <table>
    <colgroup>
      <col class="th"/>
      <col />
      <col class="th"/>
    </colgroup>
    <tbody>
      <tr>
        <th>18</th>
        <td colspan="2">LqtgHRqNcW</td>
      </tr>
      <tr>
        <th>91</th>
        <td colspan="2">BhydHJUADT</td>
      </tr>
      <tr>
        <th>85</th>
        <td>frvFQoRUuC</td>
        <th>5214</th>
      </tr>
      <tr>
        <th>06</th>
        <td>tIfFHLblmN</td>
        <th>8808</th>
      </tr>
      <tr>
        <th>49</th>
        <td colspan="2">HMPbrfKYcN</td>
      </tr>
      <tr>
        <th>68</th>
        <td colspan="2">mMxIjEQMgD</td>
      </tr>
      <tr>
        <th>39</th>
        <td colspan="2">dDFSkkkLww</td>
      </tr>
      <tr>
        <th>57</th>
        <td>vMvOZYyLIB</td>
        <th>3235</th>
      </tr>
      <tr>
        <th>12</th>
        <td colspan="2">AKWQsKDNpr</td>
      </tr>
      <tr>
        <th>58</th>
        <td colspan="2">oCNXiRSwOO</td>
      </tr>
    </tbody>
  </table>

Upvotes: 1

Related Questions