What I'm trying to achieve is the following table (which I created using Word):
Each cell basically acts as if it has two columns within it, the text-characters on the left and the digits on the right. How can I do this in HTML? The closest I have gotten is a normal table with empty cells acting as the space between the text and the digits, but that's not what I want. What's a cleaner way to do this?
If I'm understanding your intent correctly, see example below using a default auto layout and sharing a width between the wide columns to allow the skinny ones to only consume space necessary (unless you want to give them a fixed width of sorts). Though in the future a reproducible example of your effort is appreciated.
table {
table-layout: auto;
border-collapse: collapse;
border-bottom: #000 1px solid;
width: 100%;
}
th { text-align: left }
th, td {
padding: 0 .5rem;
}
table th:nth-child(odd) {
width: 50%;
border: #0f0 1px dashed;
}
table th:nth-child(2), table td:nth-child(2) {
border-right: #000 1px solid;
}
table tr:first-child {
border-bottom: #000 1px solid;
}
table tr:last-child {
border-top: #000 1px solid;
}
<table>
<tr>
<th>
wide column
</th>
<th>
skinny
</th>
<th>
wide column
</th>
<th>
skinny
</th>
</tr>
<tr>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
</tr>
<tr>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
<td>
Stuff
</td>
</tr>
</table>
Related
I have a table that has some Fill in the blanks such as a form and I want to create a HTML Table that looks a lot like the real PDF File how do you create 2 Lines in <td> That look a lot like this:
Right now it looks like this in the page:
Here is the Raw HTML of how its done:
<table>
<tr><td><font>Balance Forward: $1,000.00</font><br/>
<font>______________________________________</font></td></tr></table>
You may simply use border :
span {
padding: 0 50px;
border-bottom: 1px solid;
}
<table>
<tr>
<td>
Balance Forward: <span>$1,000.00</span>
</td>
</tr>
</table>
or like this if you want to keep a table structure
.border {
padding: 0 50px;
border-bottom: 1px solid;
}
<table>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
$1,000.00
</td>
</tr>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
$10.00
</td>
</tr>
</table>
<table>
<tr>
<td>
<font>
Balance Forward: <u> $1,000.00</u>
</font>
<br/>
</td>
</t>
</table>
Try the HTML u tag...
<table>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
<u>$1,000.00</u>
</td>
</tr>
<tr>
<td>
Balance Forward:
</td>
<td class="border">
<u>$10.00</u>
</td>
</tr>
</table>
I would like to have text within a table cell to be positioned a little bit higher, near the top. Please take a look at the provided screenshot. You can see in the TD below Column 1 how I want it to look like:
https://jsfiddle.net/38f1aru6/1/
HTML:
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
CSS:
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
I'm new to HTML and CSS... and a little bit shocked how complicated some simple styling can be.
My first guess was text alignment within a cell... vertical-align? Didn't work.
Then I tried to use an element with absolute positioning within an element with relative positioning. It did work ... almost ... but the text did flow out of the cell.
I would be very grateful if you could show me the right direction to solve this (easy?) task.
Edit:
I want to keep the yellow bar in the same position, but I want to move the text within the bar upward.
It seems from comments that you want to keep the yellow bar in the same position, but you want to move the text in it upward. That is not hard, but it does involve adding extra markup; otherwise it's impossible to separate the text from the background in that way. So, here you go.
.yellow_marked {
background-color: yellow;
}
table {
border: 1px solid black;
}
td, th {
border: 1px solid;
}
/* added css */
caption {
font-weight: bold
}
.yellow_marked>span {
position: relative;
top: -2px;
}
<table class="table_text">
<caption>
Title
</caption>
<tbody>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
</tr>
<tr>
<td>
<span class="td_content yellow_marked"><span>Cell content here</span></span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
Also, I'm sorry for changing your HTML, but you were using non-semantic markup for the title and the column headers, not to mention obsolete and unnecessary elements; couldn't bear to leave those in.
If you want, you can use the new CSS with the old HTML though.
you can use vertical-align:super on the span inside ( on .td-content )
see snippet below or jsFiddle
let me know if this is what you want
.td_content
{
vertical-align:super;
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
vertical-align:top works.
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
height: 50px;
vertical-align: top; /* To move the text to the top */
padding-top: 5px; /* To create a gap at the top */
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
You could add the yellow background to the td instead. And then use a negative margin on the span element.
fiddle
.td_content {}
.yellow_marked {
background-color: yellow;
}
.yellow_marked span {
display: block;
margin-top: -4px;
}
table {
border: 1px solid black;
}
td {
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td class="yellow_marked">
<span class="td_content">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
I have a table with the following class:-
.multicolor {
border: 1px solid #000000;
}
and for one specific table row I wanted to remove the left and right borders, replacing them with top and bottom so that it looks like one table is ending and another is beginning. Here's how I was trying it and no any luck.
<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
</tr>
The top and the bottom borders are appearing but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?
try this.
table {
border-collapse:collapse;
}
td {
border:none;
}
You have to set border of your td or th "none";
May be this will help hide cells border using css
hello See the below fiddle as you mentioned the merge row I did this for both border and without border in the rows .hope it helps
<table>
<thead>
<tr>
<th class="col1">1</th>
<th class="col2">2</th>
<th class="col3">3</th>
</tr>
</thead>
<tr class="first">
<td>asdas</td>
<td>asdas</td>
<td >boooo</td>
</tr>
<tr class="second">
<td>asdas</td>
<td>asdas</td>
<td>asdas</td>
</tr>
</table>
see the below fiddle
fiddle demo
try this,working fine
<style>
.border {
border:solid 1px #000;
}
.border-head {
border-bottom:solid 1px #000;
}
</style>
<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
<tr>
<td class="border-head"> </td>
<td class="border-head"> </td>
<td class="border-head" > </td>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Is
border-collapse:collapse;
and
border-spacing: 0px; /* only active/useful with option "separate" */
border-collapse:separate;
the same?
They are Different! (See Snippet below to confirm).
According to MDN here and here
The border-collapse CSS property determines whether a table's borders
are separated or collapsed. In the separated model, adjacent cells
each have their own distinct borders. In the collapsed model, adjacent
table cells share borders.
and
The border-spacing CSS property specifies the distance between the
borders of adjacent table cells (only for the separated borders
model). This is equivalent to the cellspacing attribute in
presentational HTML, but an optional second value can be used to set
different horizontal and vertical spacing.
The border-spacing value is also used along the outside edge of the
table, where the distance between the table's border and the cells in
the first/last column or row is the sum of the relevant (horizontal or
vertical) border-spacing and the relevant (top, right, bottom, or
left) padding on the table.
This property applies only when border-collapse is separate.
So here is a SNIPPET with a few examples
body {
margin: 0;
font-family: Arial;
}
table {
width: 100%;
margin:30px 0
}
td {
border: 1px solid red
}
.collapse {
border-collapse: collapse;
}
.separate {
border-collapse: separate;
}
.no-spacing {
border-spacing: 0
}
.spacing {
border-spacing: 10px
}
<h4>Borders will collapse and therefore no space between them</h4>
<table class="collapse no-spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<h4>Borders will try to separate between them but then using border-spacing:0 will join the borders without collpasing (looking like has double borders)</h4>
<table class="separate no-spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr />
<h3> 2 more examples </h3>
<h4>Border-spacing won't work due to only applies when border-collapse isset to separate</h4>
<table class="collapse spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr />
<h4>Borders will separate between them due to having border-spacing:10px and because border-collapse has separate as initial value</h4>
<table class="spacing">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I am using Bootstrap.
I have a table, where some rows needs to be grouped with the rows below them.
That means there should be no border between them.
I am wondering if there is an inherent bootstrap way of doing this, or do I need to
put on each tr style="..no border.."
All I care is for the solution to work on Chrome (and nice to have on FF).
<table>
<tr>
<td>
<label>Stuff</label>
</td>
<td>
<label>sdrfg</label>
</td>
</tr>
<tr class="group">
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
<tr>
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
</table>
CSS:
table{
width:100%;
border-collapse:collapse;
}
table td{
border-top:1px solid #000000;
}
table tr.group>td{
border-top:none;
}