Reputation: 81
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?
Upvotes: 0
Views: 60
Reputation: 106078
You need the attribute colspan
https://jsfiddle.net/yb1hcy7q/1/
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