I have the following basic table:
.tabella-test{
border-collapse: collapse;
}
.tabella-test td, .tabella-test th{
border: 1px solid black;
}
<TABLE class="tabella-test">
<thead>
<tr>
<th colspan="1" rowspan="2">Tree</th>
<th colspan="1" rowspan="2">Short Description</th>
<th colspan="2">Alberto - Group 12/2009</th>
<th colspan="2">Andrea - Group 12/2010</th>
</tr>
<tr>
<th colspan="1" rowspan="1">Value (x1)</th>
<th colspan="1" rowspan="1">%</th>
<th colspan="1" rowspan="1">Value (x1)</th>
<th colspan="1" rowspan="1">%</th>
</tr>
</thead>
<tbody>
<tr>
<td>ciao</td>
<td>test</td>
<td>-165.889.226</td>
<td>-29,6</td>
<td>310.819.176</td>
<td>150,6</td>
</tr>
</tbody>
</TABLE>
I'd like to put black overlapping borders around every td and th cell. I tried with the above CSS,
but in the pdf generated by iText the output is messed up, only some borders overlap. Any hint?
Related
I have pasted my code below as well as a picture of what I am trying to accomplish. "Header 2" should span 3 columns instead of 2 and "DataA1",B1,C1 should span 2 columns instead of 1. But when I specify that in my code it doesn't do anything. I am not sure what error I have run into.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
.title
{
padding: 10px;
}
</style>
</head>
<body>
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
</table>
</body>
</html>
"data A1" and the two cells below it do span two columns, and "Header2 " does span three columns, but there is no row where you would see this additional divison between column two and three. If you add a row with five cells you see what I mean (I only added that last row, I didn't change your code otherwise):
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.title {
padding: 10px;
}
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing D</th>
<td>dataD1a</td>
<td>dataD2</td>
<td>dataD3</td>
<td>dataC4</td>
</tr>
</table>
You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.
Then add a width to th and td to maintain the correct styles, and you can hide the empty row to match your design.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.title {
padding: 10px;
}
th, td {
width: 20%;
}
<h1>Table</h1>
<table>
<tr>
<th colspan="4" class="title">A common header for three subheads</th>
<th rowspan="2">Header 3</th>
</tr>
<tr>
<th>Header 1</th>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th>Thing A</th>
<td colspan="2">dataA1</td>
<td>dataA2</td>
<td>dataA3</td>
</tr>
<tr>
<th>Thing B</th>
<td colspan="2">dataB1</td>
<td>dataB2</td>
<td>dataC3</td>
</tr>
<tr>
<th>Thing C</th>
<td colspan="2">dataC1</td>
<td>dataC2</td>
<td>dataC3</td>
</tr>
<tr style="visibility: hidden;" aria-hidden="true">
<th></th><td></td><td></td><td></td><td></td>
</tr>
</table>
Can somebody please explain to me why the second row is not on a new line?
$(document).ready(function() {
$('.rotate').css('height', $('.rotate').width());
});
td {
border-collapse: collapse;
border: 1px black solid;
}
th {
border: 1px black solid;
border-collapse: collapse;
}
tr {
text-align: center;
}
.rotate {
-webkit-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</table>
(fiddle)
rowspan="2" in the th elements (even in all of them) doesn't really make sense. If you remove it, you get a regular table:
table {
border-collapse: collapse;
}
td, th {
border: 1px dotted #aaa;
}
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<tr>
<th>EON</th>
<th colspan="2">ERA</th>
<th colspan="3">PERIOADA</th>
<th colspan="2">Cicluri orogenice</th>
<th>Mil. ani în urmă</th>
<th colspan="4">Viețuitoare tipice</th>
</tr>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</table>
Use thead and tbody tag
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<thead>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</tbody>
</table>
Just include row of head part (<th>) to the <thead> tag and the other part of the row inlude in <tbody>. Hope it will help work as you expect.
td {
border-collapse: collapse;
border: 1px black solid;
}
th {
border: 1px black solid;
border-collapse: collapse;
}
tr {
text-align: center;
}
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<thead>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</tbody>
</table>
I am trying to implement cellpadding and cellspacing in my forum, but I just can't get the width="100%" to work with it.
Is it possible to set a width while using cellpadding or cellspacing in my CSS?
.categories div.category td tr{
padding: 80px;
width: 500px;
}
echo '
<table class="categories">
<caption>Category: ', $row2['category'], '</caption>
<thead>
<tr>
<td colspan="3">
<th colspan="3"><a href="create_music_sub.php?cat='.$row2['id'].'&admin='.$row2['admin'].'">
Click here to Create Sub Category
</a></th>
</td>
</tr><tr>
<div class="category"><th scope="col">Category</th></div>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
</thead><tbody>';
If what you meant is to set the table's width to 100%, this works.
And as for the code you provided there were mistakes:
When you want to use a th you don't use a td with it.
The div.category should be inside the tr > th not wrapping it.
When you're posting a question please remove the php fragments and provide a working fiddle for us to be able to help you faster.
Please look at the code to see what I did differently. I think the problem was in your html
table{
border:1px solid black;
width: 100%;
}
tr, th, td{
border:1px solid black;
}
td,th{
padding: 10px;
}
/*If you want the last column to be smaller you can change one of them to a certain width*/
.creator{
width:20%;
}
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
</tr>
</thead>
</table>
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col" class="creator">Creator</th>
</tr>
</thead>
</table>
In my app there's an option to add auto-generated tables and I need to make them scroll-able (overflow-x) when the table is wider than the containing parent. My solution works for wider tables, however not for tables that are narrower than the parent, I need them to stretch across the parent container.
CodePen here.
HTML:
<div id="parent">
<table cellspacing="0" width="100%" class="scroll">
<tbody>
<tr class="ms-rteTableHeaderRow-default">
<th rowspan="1" colspan="3">dasdasdas</th>
<th rowspan="1" colspan="3">dasdasdas</th>
<th rowspan="1" colspan="3">dasdasdas</th>
<th rowspan="1" colspan="3">dasdasdas</th>
<th rowspan="1" colspan="3">dasdasdas</th>
<th rowspan="1" colspan="3">dasdasdas</th>
<th rowspan="1" colspan="3">dasdasdas</th>
</tr>
<tr class="ms-rteTableOddRow-default">
<th class="ms-rteTableFirstCol-default" rowspan="1" colspan="1">dasdasdas<br>dasdasdas<br>dasdasdas</th>
<td class="ms-rteTableOddCol-default">dasdasdas dasdasdas </td>
<td class="ms-rteTableEvenCol-default">dasdasdas</td>
<td class="ms-rteTableOddCol-default"> </td>
</tr>
<tr class="ms-rteTableEvenRow-default">
<th class="ms-rteTableFirstCol-default" rowspan="1" colspan="4">dasdasdas</th>
<td class="ms-rteTableOddCol-default">dasdasdas</td>
<td class="ms-rteTableEvenCol-default">dasdasdas</td>
<td class="ms-rteTableEvenCol-default">dasdasdas</td>
</tr>
<tr class="ms-rteTableOddRow-default">
<th class="ms-rteTableFirstCol-default" rowspan="1" colspan="1">dasdasdas</th>
<td class="ms-rteTableOddCol-default">dasdasdas<br>dasdasdas</td>
<td class="ms-rteTableEvenCol-default">dasdasdas<br>dasdasdas</td>
</tr>
<tr class="ms-rteTableFooterRow-default">
<th class="ms-rteTableFooterFirstCol-default" rowspan="1" colspan="4">dasdasdas</th>
<td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td>
<td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td>
<td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td>
<td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td>
<td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td>
<td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td>
</tr>
</tbody>
</table>
<table cellspacing="0" width="100%" class="ms-rteTable-default scroll" style="font-size:1em">
<tbody>
<tr>
<th rowspan="1" colspan="1">title 1</th>
<th rowspan="1" colspan="1">this table should span across the parent</th>
</tr>
<tr>
<th rowspan="1" colspan="1">content</th>
<td >contentcontentcontentcontentcontentcontentcontentcontentcontentcontent</td>
</tr>
</tbody>
</table>
</div>
CSS:
td,th{
border:1px solid black;
}
#parent{
width: 700px;
}
table{
border:1px solid blue;
padding: 10px;
}
.scroll{
display: block;
overflow-x: auto;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
I took a look at your CodePen and everything looks fine to me. What I do see happening is that your cells aren't taking up the entire width. The tables (blue borders) are spanning the entire width, but your cells width fit to it's content. if you add the following to you cells
td, th {
width:100%;
}
Your table cells will span to the full width of the table. That being said, maybe you only want the second cell to span to the full width. Then just add a custom class with width: 100%; .
My HTML is:
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; ">
No Border here, just white background
</th>
<th style="width:60%; background-color:gray" colspan="3">
Superheading</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
How do I remove the border in the top left cell ie the cell that contains "No Border here, just white background".
Thanks.
You could do it like this - DEMO
HTML:
<body>
<style>
table, table th, table td {
border:1px solid black;
border-collapse:collapse;
}
</style>
<table style="width:100%;">
<tbody>
<tr>
<th style="width:40%; background-color:white;" class="border-less"> </th>
<th style="width:60%;text-align:center" colspan="3">Assumed Growth Rate</th>
</tr>
<tr>
<th align="left" style="width:40%">Options</th>
<th style="width:20%">Title2</th>
<th style="width:20%">Title3</th>
<th style="width:20%">Title4</th>
</tr>
<tr>
<td>Option1</td>
<td>val1</td>
<td>val2</td>
<td>val3</td>
</tr>
</tbody>
</table>
</body>
CSS:
.border-less {
border-top: 1px solid white;
border-left: 1px solid white;
}
try to add :
style="border: none";
on th tag or the tr tag containing the headers.Depending on what you need..
This fiddle uses CSS and a '.borderless' class.
However, if you wanted to stick to inline styling, you could do this:
<th style="width:40%; border:none;">