I've got a table showing participation of countries in a project in 2013 and 2018. For a year in which a country participated, we want to display a black circle. The cell will be empty for a year in which the country didn't participate.
For the sake of accessibility, I was figuring on having "Yes" and "No" in the table, and then using CSS repositioning and the ::before pseudo-element to put the screen reader-readable text off-screen and swap the black circle into place in the Yes cells.
I could tell that the black circle wasn't centered. To emphasize what was going on, I replaced "Yes" with "Affirmative" and replaced "No" with a hollow circle instead of nothing. The display produced by the code below shows that the circles are being displayed at the left of where the words "Affirmative" and "No" would have been if I hadn't displaced them. How can I display the symbols centered in the columns instead?
<!DOCTYPE html>
<html>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
left: -999em;
width: 0;
}
table tbody td .yes::before {
position: relative;
left: 999em;
content: "\0025cf";
}
table tbody td .no {
position: relative;
left: -999em;
width: 0;
}
table tbody td .no::before {
position: relative;
left: 999em;
content: "\0025cb";
}
</style>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
</html>
This gives me:
Without the substitution, I get the following, which shows that the symbols are being positioned at the left edge of where the words would be if I hadn't displaced them.
Can anyone give me any tips? I've tried setting widths of the displaced text to 0 and hiding overflow, to no avail.
The problem with this approach (if you care about accessibility) is that CSS pseudo-elements aren't actually added to the DOM. Most browsers will compensate for this, but Internet Explorer doesn't. There are enough people using IE that this matters. Resizing content to zero pixels height or width will also prevent screen readers from announcing the content.
A better way of approaching this issue would be to load all content into the DOM and then use the aria-hidden attribute on the content you DON'T want screen readers to announce.
Here's a fiddle of a more accessible version of this:
https://jsfiddle.net/2jvL6f0L/
No need to hide span by positioning it to -999em.
See the following solution. Hope this will help. (JSFiddle link)
Here I've just made the span text transparent and positioned :before by calc(). This will always make it aligned in the middle.
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
/* Indicator symbol substitution */
table tbody td .yes {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .yes::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cf";
display: block;
color: #000;
width: 20px;
}
table tbody td .no {
position: relative;
width: 100%;
color: transparent;
display: block;
}
table tbody td .no::before {
position: absolute;
left: calc(50% - 10px);
content: "\0025cb";
display: block;
color: #000;
width: 20px;
}
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th><th scope="col" class="indicator">2013</th><th scope="col" class="indicator">2018</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">Australia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Bolivia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Croatia</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="no">No</span> </tr>
<tr> <th scope="row">Denmark</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Ethiopia</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">France</th> <td class="indicator"><span class="no">No</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
<tr> <th scope="row">Germany</th> <td class="indicator"><span class="yes">Affirmative</span> <td class="indicator"><span class="yes">Affirmative</span> </tr>
</tbody>
</table>
Well, I came up with one solution: set display: block; on the ::before. That has a couple of side effects: the table rows are now taller than I'd like, even though I've set padding and margin to 0; and the circles aren't vertically centered, and setting vertical-align: middle; doesn't fix that. I've wound up setting top: 4px; but I'm not thrilled with that approach.
Incorporating ideas from previous responses here, I've now come up with the following replacement for my previous approach.
table tbody td.indicator {
text-align: left; /* not center */
}
...
table tbody td .yes {
position: relative;
left: -999em;
}
table tbody td .yes::before {
position: relative;
left: calc(50% + 998.75em);
content: "\0025cf";
}
Below is one solution that should help.
I moved the Affirmative and No into the title attribute of the <span> and placed the HTML elements for the two kinds of circles as the content of the <span>
This removed the need for the :before in the CSS.
The title helps with Accessibility, but not really since all the screen readers will read is the word "Affirmative" or "No" with no context. It might be better, if you are concerned about screen readers to improve on the title attribute to be something more like: title="Affirmative for Germany in 2013" or something like that.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
font-size: 24px;
border: none;
margin: 1em 0;
}
/* thead */
table thead th {
font-weight: bold;
padding: 0 1em;
}
table thead th.text {
text-align: left;
}
table thead th.indicator {
text-align: center;
}
table thead th:not(:first-child) {
border-left: 1px solid white;
}
/* tbody */
table tbody th,
table tbody td {
padding: 0.15em 1em;
color: black;
background-color: white;
}
table tbody th {
text-align: left;
font-weight: normal;
}
table tbody td {
border-left: 1px solid white;
}
table tbody td.text {
text-align: left;
}
table tbody td.indicator {
text-align: center;
}
/* Specifics for IC tables */
table.ic thead th {
color: white;
background-color: #6BB1C9;
}
table.ic tbody tr:nth-child(odd) th,
table.ic tbody tr:nth-child(odd) td {
background-color: #E1F0F4;
}
</style>
</html>
<body>
<h1>Table example</h1>
<table class="ic">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col" class="indicator">2013</th>
<th scope="col" class="indicator">2018</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Australia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Bolivia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Croatia</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="No">○</span></td>
</tr>
<tr>
<th scope="row">Denmark</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Ethiopia</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">France</th>
<td class="indicator"><span title="No">○</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
<tr>
<th scope="row">Germany</th>
<td class="indicator"><span title="Affirmative">●</span></td>
<td class="indicator"><span title="Affirmative">●</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I found out that you can't style thead, tr, or tbody. What I want to do is have a 2px white border between the cells and doesn't over lap and give the table a border radius where the table cells don't break the radius.
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
}
td {
padding : 12px;
border: 2px solid white;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
Is there a way of going about this?
Also I tried to add the reset I was using to the code and everything broke because I don't know how to add it before the css that runs in the code snippet example:
https://meyerweb.com/eric/tools/css/reset/reset.css
Its isn't quite true that you cant style th, tr, td elements in a table. You can see below how the background colour of th & tr is changed.
You can target cells in the corners through pseudo classes such as :first-child, :last-child and add individual border radius property.
In your sample code I've used these properties to mention the borders.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
background: red;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
td {
padding : 12px;
border: 2px solid white;
}
tr:nth-child(even) {
background: grey;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
I have applied following CSS to my table.
thead, tbody
{
display: block;
}
tbody
{
height: 200px;
overflow-y: auto;
overflow-x: auto;
}
The objective is to make the thead fixed, and keep tbody scrolling. Before applying the above CSS, thead and tbody content was alligned properly. But after putting the CSS, the content is mis-aligned. Even tr elements doesn't fill the entire space of their container. Can someone help me with this? Any help will be appreciated.
try this code for sticky header and scrollable body for table. hope will work for you.
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
th{
position: sticky;
position: -webkit-sticky;
top: -1px;
z-index: 999;
background-color: #000;
color:white;
}
.sticky-table {
height: 200px;
overflow: auto;
}
<div class="sticky-table">
<table>
<tr>
<th>First Name</th>
<th>m-1</th>
<th>m-2</th>
</tr>
<tr>
<td>user 1</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>user 2</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>user 3</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>user 4</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>user 5</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?
Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Deryck has the right answer altough it's not complete because of browser implementation and missing tr
#myTable > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > tbody > tr > th {
border: 1px solid #ddd;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable
#myTable > td, #myTable > th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Here's a JSFiddle that has a simple table from an internal CMS:
<table class="rotated-text">
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>260</td>
<td>200</td>
<td>210</td>
<td>220</td>
</tr>
</tbody>
</table>
I'd like to rotate the text in all but the first element by 45 degrees counterclockwise, but without also bringing along the background. I'm also hoping I can do this without changing the HTML -- only applying CSS. The result should look similar to this:
Is that possible?
How about this. Needed some additional wrapper elements. Add your background image to your <th>.
.rotated-text {
border-collapse:collapse;
}
.rotated-text td {
text-align:right;
border: 1px solid #ccc;
}
.rotated-text tbody tr > :first-child {
border-top:none;
border-left:none;
border-bottom: 1px solid #ccc;
}
.rotated-text th {
height: 140px;
white-space: nowrap;
background-color: lightblue;
background-image:url("https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.rotated-text th > div {
transform: translate(25px, 51px) rotate(315deg);
width: 35px;
position:relative;
float:right;
margin-right:5px;
}
.rotated-text th > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<table class="rotated-text">
<thead>
<tr>
<th><div><span>property</span></div></th>
<th><div><span>San Francisco, CA</span></div></th>
<th><div><span>New York, NY</span></div></th>
<th><div><span>Washington, DC</span></div></th>
<th><div><span>Charlottesville, VA</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
Here goes my try ...
Not sure about the background that you want to get... Is it the background of the th ? Looks a little ugly .
The borders are real borders, but on a pseudo element of the first row of tds
th:nth-child(n+2) {
border-color: transparent;
transform: translateX(100%) rotate(-45deg);
transform-origin: left bottom;
}
td {
border: solid 1px black;
position: relative;
}
.rotated-text {
margin-top: 100px;
border-collapse: collapse;
}
tr:first-child td:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-color: lightblue;
bottom: 100%;
z-index: -1;
left: 0px;
}
tr:first-child td:nth-child(n+2):before {
content: "";
position: absolute;
height: 100%;
width: 100%;
bottom: 100%;
left: 0px;
border-bottom: solid 1px black;
transform: translateX(100%) rotate(-45deg);
transform-origin: left bottom;
}
<table class="rotated-text">
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline.
.rotated-text {
border-spacing: 0;
}
.rotated-text thead > tr {
background-color: lightblue;
}
.rotated-text th {
height: 9em;
max-width: 3em;
text-align: left;
white-space: nowrap;
transform: rotate(-45deg) translateX(-1.5em) translateY(2.5em);
text-decoration: underline;
}
.rotated-text th:first-child {
transform: rotate(-45deg);
}
.rotated-text td {
text-align: center;
}
<table class="rotated-text">
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
So it's not perfect, and if other people could improve on this, I'd be interested in that solution too!
Alright, this the closest I can get. Using box shadow to draw the line for the th.
http://jsfiddle.net/vcbkport/
table {
margin-top: 100px;
border-collapse: collapse;
}
th {
box-shadow: 0 4px 0 -2px grey;
transform: rotate(-45deg);
transform-origin: 0 0 0;
text-align: left;
text-indent: 10px;
white-space: nowrap;
}
td {
border: 1px solid grey;
}
<table>
<thead>
<tr>
<th>property</th>
<th>San Francisco, CA</th>
<th>New York, NY</th>
<th>Washington, DC</th>
<th>Charlottesville, VA</th>
</tr>
</thead>
<tbody>
<tr>
<td>days of sunshine</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
I have the following html which is generated by a web framework so I can't change it. I can however add my own CSS.
<table border="0" class="formlayout" role="presentation">
<tbody>
<tr>
<td align="right">Medical Aid Plan</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Adult Medical Aid Dependants</td>
<td align="left"><input type="text"></td>
<td align="right">Child Medical Aid Dependants</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Total Package</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Pensionable Earnings</td>
<td align="left"><input type="text"></td>
<td align="right">Pensionable Earnings Percentage</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Voluntary Contributions</td>
<td align="left"><input type="text"></td>
<td align="right">Voluntary Contributions Percentage</td>
<td align="left"><input type="text"></td>
</tr>
</tbody>
</table>
I would like to create sections in the form and draw blocks around these sections , complete with text section headings. In order to achieve this I was thinking of adding additional space between the table rows and then adding CSS pseudo elements for the text and section frames. How would one do this?
I would like to add the first 3 text inputs to Section 1 and the rest to Section 2.
I'm trying to achieve something like this:
It can be done. But it only works with a fixed width layout (unless you use mediaqueries) and I don't know about browser compatibility.
It would be easier to set some padding and a background image.
Here is a jsfiddle: http://jsfiddle.net/L7y5rz9j/
table.formlayout {
width: 730px;
}
table.formlayout td {
position: relative;
z-index: 2;
}
table.formlayout tr:nth-child(1) td {
padding-top: 1em;
}
table.formlayout tr:nth-child(3) td {
padding-top: 3em;
}
table.formlayout tr:nth-child(1):after, table.formlayout tr:nth-child(3):after {
content:"";
position: absolute;
left: 0;
width: 750px;
border: 1px solid;
}
table.formlayout tr:nth-child(1):after {
height: 5em;
}
table.formlayout tr:nth-child(3):after {
height: 6em;
margin-top: 2em;
}
table.formlayout tr:first-child td:first-child:after, table.formlayout tr:nth-child(3) td:first-child:after {
position: absolute;
z-index: 1;
width: 3em;
padding: 2px 5px;
margin-left: 7em;
background: white;
}
table.formlayout tr:first-child td:first-child:after {
content:"Step 1";
top: -9px;
}
table.formlayout tr:nth-child(3) td:first-child:after {
content:"Step 2";
top: 23px;
}