I have an HTML table with two columns. There are two cells in the header and two cells in the body. But when I view the page both of the body cells are squeezed under the first cell in the header. A minimal example below:
<!DOCTYPE HTML >
<html lang="en">
<head>
<title>
Census Administration: Canada Censuses Table Display
</title>
<meta charset="utf-8">
<style>
th.colhead {
font-family: sans-serif;
font-weight: bold;
text-align: center;
background-color: #F4E8B0;
border-top: thin solid black;
border-bottom: medium solid black;
border-right: thin solid black;
}
.button {
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
text-align: center;
text-decoration: none;
background-color: #E0E0E0;
color: #000000;
border-top: 2px solid white;
border-left: 3px solid white;
border-bottom: 3px solid #606060;
border-right: 3px solid #606060;
padding: 2px 12px 2px 12px;
display: inline-block;
}
</style>
</head>
<body>
<!--- Put out the response as a table -->
<form name="censusForm">
<table id="dataTable">
<thead> <!--- Put out the column headers -->
<tr id="hdrRow">
<th >
Source<br>ID
</th>
<th >
Districts
</th>
</tr>
</thead>
<tbody>
<tr id="Row01">
<td >
Source
</td>
<td >
Districts
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
I get the same result on both Chrome and Firefox so I knew I was doing something wrong, but I did not understand why.
If I remove display: inline-block; from the button style it works, but padding doesn't work so the "buttons" are not properly placed if the same style is applied to an in-line element. I also tried inline-flex and inline-grid. If I tried block the two buttons are displayed one on top of each other!
CodePudding user response：
The solution is to understand that applying the .button class to a table cell does not work the same as applying it to a <span>, <a>, or other inline element. When applied to an inline element you need display: inline-block because the default of inline does not honor the padding around the "button" and so the appearance of the "button" is wrong. My application uses <span > in help pages where I explain the function of buttons on forms, and it uses <a > where the action of the button is implemented by going to another URL rather than invoking the click handler of the element. But display: inline-block overrides the default display: table-cell of the so the resulting element does not occupy the complete width of the column. So I need two versions of the button style, one for inline elements, which require the inline-block so the button is displayed properly, and a separate one for table cells and block elements, such as <p> or <div> which does not override the default display attribute.
CodePudding user response：
As James mentioned in his answer, it has to do with understanding the differences between block, inline-block, and table-cell.
Below, I've slightly modified your code to:
- Remove
.buttonclass from the table cells - Wrap each cell content in
spanwith the.buttonclass
Not sure what your intended layout is, but hope this would give you a starting point.
th.colhead {
font-family: sans-serif;
font-weight: bold;
text-align: center;
background-color: #F4E8B0;
border-top: thin solid black;
border-bottom: medium solid black;
border-right: thin solid black;
}
.button {
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
text-align: center;
text-decoration: none;
background-color: #E0E0E0;
color: #000000;
border-top: 2px solid white;
border-left: 3px solid white;
border-bottom: 3px solid #606060;
border-right: 3px solid #606060;
padding: 2px 12px 2px 12px;
display: table-cell;
}<form name="censusForm">
<table id="dataTable">
<thead> <!--- Put out the column headers -->
<tr id="hdrRow">
<th >
Source<br>ID
</th>
<th >
Districts
</th>
</tr>
</thead>
<tbody>
<tr id="Row01">
<td>
<span >
Source
</span>
</td>
<td>
<span >
Districts
</span>
</td>
</tr>
</tbody>
</table>
</form>CodePudding user response：
if you explicitly define the width and height and remove display: inline-block this works..
th.colhead {
font-family: sans-serif;
font-weight: bold;
text-align: center;
background-color: #F4E8B0;
border-top: thin solid black;
border-bottom: medium solid black;
border-right: thin solid black;
width: 10rem;
height: 3rem;
}
.button {
font-family: sans-serif;
font-weight: bold;
font-size: 80%;
text-align: center;
text-decoration: none;
background-color: #E0E0E0;
color: #000000;
border-top: 2px solid white;
border-left: 3px solid white;
border-bottom: 3px solid #606060;
border-right: 3px solid #606060;
padding: 2px 12px 2px 12px;
/* display: inline-block; */
width: 10rem;
height: 3rem;
}<form name="censusForm">
<table id="dataTable">
<thead> <!--- Put out the column headers -->
<tr id="hdrRow">
<th >
Source<br>ID
</th>
<th >
Districts
</th>
</tr>
</thead>
<tbody>
<tr id="Row01">
<td >
Source
</td>
<td >
Districts
</td>
</tr>
</tbody>
</table>
</form>