<table>
<tr>
<td>4px</td>
<td>4px</td>
<td>4px</td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr>
<td>4px</td>
<td>4px</td>
<td>4px</td>
</tr>
</table>
I can't set the td's to 4px height using CSS.
Firstly, you cannot define a css class that starts with a number. Your rules dont apply because you set a class of "4px". Please validate.
Secondly, define a font-size so the font doesn't exceed four pixels.
Thirdly, if this isn't tabular data do not use a table for the job. See http://www.hotdesign.com/seybold/
HTML:
<table cellspacing="0" cellpadding="0" width="100%">
<tr class="four-px">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr class="four-px">
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS:
table, tr, td { background:#dd0;}
tr.four-px { height:4px; }
tr.four-px td { background:#ff9; font-size:4px; line-height:1; }
Live Demo: http://jsfiddle.net/D9pm9/11/
Live Demo with text inside rows: http://jsfiddle.net/D9pm9/12/
set the row's height.
<td>style="height:4px;"</td>
or...
<table>
<tr>
<td class="smallCell"></td>
<td class="smallCell"></td>
<td class="smallCell"></td>
</tr>
</table>
/* style sheet */
.smallCell
{
height: 4px;
}
They won't shrink to 4px if you have text or some other element inside them which is too large though.
TD's always expand to accommodate the content. So if your TD is to be 4px, your content inside will have to be 4px or less as well.
Consider TD dimensions as min-width/min-height in concept.
I don't think you can size a row to 4px if there is text in it.
You can, however, resize the text inside the td itself to shrink the cells:
<table>
<tr>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
</tr>
<tr>
<td colspan="3">content</td>
</tr>
<tr>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
<td style="font-size: 4px;">4px</td>
</tr>
</table>
Related
I'm trying to create table which looks like below:
I have tried using margin-right property ,and also border spacing ,colspan but not able to achieve it!
Here is my link to codepen:https://codepen.io/saisree/pen/jwwwEZ
<tr >
<td style="padding-top:10px;"colspan="2"class=" fixed text-center">
<span class=" border6 bold pull-left">2210 924-16(267) </span><span class="boxed1"></span></tr>
Any kind of help is highly appreciated.
You need two tds in each tr. In the first 4 rows you apply the attribute colspan="2" to the second td tag, in the rows after that you apply colspan="2" to the first td tag. That's basically all. So actually, there are three TDs in each row, but as each row has a td with a colspan, you only see two in each row.
The width will depend on the contents by default, but you can use width settings for the tds of course. You can not use margins on tds.
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #ddd;
min-width: 35%;
}
td:nth-child(2) {
min-width: 50%;
}
<table>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
</table>
I am currently using EvoPDF (HTML to PDF) to build up a report in C#.
In this report we have a table, looking something like this in the fiddle:
http://jsfiddle.net/bk48srw1/3/
with the important part:
<tr>
<td>label for something</td>
<td style="position:relative;" rowspan="99999">
<div id="absolute">
<div class="centerd">
<span>value for all</span>
</div>
</div>
</td>
</tr>
The idea is that there are a variety of products, but they will have the same value in the second column, hence:
rowspan="99999"
The client wants the styling (border and background) to span the height of the second column, with the text in the middle. I have tried the position absolute, display:table, as well as vertical-align.
I cannot use a solution like Vertically align text in a span with fixed width and height
because I have no idea what the height would be (there could be an arbitrary number of tr's)
How do I make the div 100% height of the td, with the text displaying in the middle?
My preference is not to use JS, seeing that this code doesn't see a browser at all.
For styling purposes, I need to have about 3px padding inbetween the td and the div, seeing that I cannot add cellspacing to only 1 td.
Used to this change your html as like this
td{
width:50%;vertical-align:middle;
}
<table style="width:100% ">
<tr>
<td>
<table>
<tr><td>label for something</td></tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
</table>
</td>
<td style="background:yellow; border: 1px solid black;text-align:center;">
<table width="100%">
<tr><td>value for all</td></tr>
</table>
</td>
</tr>
</table>
Here you go: http://jsfiddle.net/sjncndvn/2/
HTML markup:
<table style="width:100% ">
<tr>
<td>label for something</td>
<td style="position:relative;" rowspan="99999">
<div id="absolute">
<div class="centerd">
<span>value for all</span>
</div>
</div>
</td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
</table>
CSS:
td{
width:50%;
display:table-cell ;
vertical-align:middle ;
}
#absolute {
width:100%;
background:yellow;
display:table;
border: 1px solid black;
}
.centerd {
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#pink;
}
Since #absolute no longer uses absolute positioning, you may want to change the ID name to something else.
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I don't know how to merge rows and columns inside HTML tables.
Can you please help me with making such a table in HTML?
If you're confused how table layouts work, they basically start at x=0, y=0 and work their way across. Let's explain with graphics, because they're so much fun!
When you start a table, you make a grid. Your first row and cell will be in the top left corner. Think of it like an array pointer, moving to the right with each incremented value of x, and moving down with each incremented value of y.
For your first row, you're only defining two cells. One spans 2 rows down and one spans 4 columns across. So when you reach the end of your first row, it looks something like this:
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>
Now that the row has ended, the "array pointer" jumps down to the next row. Since x position 0 is already taken up by a previous cell, x jumps to position 1 to start filling in cells. * See note about difference between rowspans.
This row has four cells in it which are all 1x1 blocks, filling in the same width of the row above it.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The next row is all 1x1 cells. But, for example, what if you added an extra cell? Well, it would just pop off the edge to the right.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
* But what if we instead (rather than adding the extra cell) made all these cells have a rowspan of 2? The thing you need to consider here is that even though you're not going to be adding any more cells in the next row, the row still must exist (even though it's an empty row). If you did try to add new cells in the row immediately after, you'd notice that it would start adding them to the end of the bottom row.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Enjoy the wonderful world of creating tables!
I'd suggest:
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4"> </th>
</tr>
<tr>
<th>I</th>
<th>II</th>
<th>III</th>
<th>IIII</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
References:
td element.
th element.
tbody element.
thead element.
table element.
If anyone is looking for a rowspan on both the left AND on the right,
here is how you can do it:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<table>
<tbody>
<tr>
<td rowspan="2">LEFT</td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td rowspan="2">RIGHT</td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
</tr>
</tbody>
</table>
Alternatively, if you want to add the LEFT and RIGHT to an existing rowset, you can achieve the same result by throwing them in with a collapsed colspan in between:
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 1px solid black;
text-align: center;
}
<table>
<tbody>
<tr>
<td rowspan="3">LEFT</td>
<td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
<td rowspan="3">RIGHT</td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
</tr>
</tbody>
</table>
Use rowspan if you want to extend cells down and colspan to extend across.
You can use rowspan="n" on a td element to make it span n rows, and colspan="m" on a td element to make it span m columns.
Looks like your first td needs a rowspan="2" and the next td needs a colspan="4".
The property you are looking for that first td is rowspan:
http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm
<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<style type="text/css">
table { border:2px black dotted; margin: auto; width: 100%; }
tr { border: 2px red dashed; }
td { border: 1px green solid; }
</style>
<table>
<tr>
<td rowspan="2">x</td>
<td colspan="4">y</td>
</tr>
<tr>
<td>I</td>
<td>II</td>
<td>III</td>
<td>IV</td>
</tr>
<tr>
<td>nothing</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
I have used ngIf for one of my similar logic. it is as follows:
<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>
here,
i'm getting rowspan value from my model object.
<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>
Colspan and Rowspan
A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.
Colspan
The colspan attribute defines the number of columns a cell should span (or merge) horizontally. That is, you want to merge two or more Cells in a row into a single Cell.
<td colspan=2 >
How to colspan ?
<html>
<body >
<table border=1 >
<tr>
<td colspan=2 >
Merged
</td>
</tr>
<tr>
<td>
Third Cell
</td>
<td>
Forth Cell
</td>
</tr>
</table>
</body>
</html>
Rowspan
The rowspan attribute specifies the number of rows a cell should span vertically. That is , you want to merge two or more Cells in the same column as a single Cell vertically.
<td rowspan=2 >
How to Rowspan ?
<html>
<body >
<table border=1 >
<tr>
<td>
First Cell
</td>
<td rowspan=2 >
Merged
</td>
</tr>
<tr>
<td valign=middle>
Third Cell
</td>
</tr>
</table>
</body>
</html>
It is similar to your table
<table border=1 width=50%>
<tr>
<td rowspan="2">x</td>
<td colspan="4">y</td>
</tr>
<tr>
<td bgcolor=#FFFF00 >I</td>
<td>II</td>
<td bgcolor=#FFFF00>III</td>
<td>IV</td>
</tr>
<tr>
<td>empty</td>
<td bgcolor=#FFFF00>1</td>
<td>2</td>
<td bgcolor=#FFFF00>3</td>
<td>4</td>
</tr>
I am wondering whether it is possible to have a fixed table layout and have one column in the middle with a wider width than all the others...?
I'd appreciate any help! :)
Thanks,
Piotr.
Just add the style=\"width: 20%;\" to the th (or td) tag of that column. Check [1]:
<table style="table-layout:fixed; border: 1px solid black; ">
<tr>
<th style="width:30% ">name</th>
<th style="width:70% ">Color</th>
</tr>
<tr>
<td>N1</td>
<td>red</td>
</tr>
<tr>
<td>N2</td>
<td>blue</td>
</tr>
</table>
[1] http://jsfiddle.net/AP5rL/1/
Just set the width attribute on the TD tag corresponding to the wider column.
Example:
<table width="650">
<tr>
<td width="100">normal</td>
<td width="100">normal</td>
<td width="250">wide</td>
<td width="100">normal</td>
<td width="100">normal</td>
</tr>
</table>
Can you add a class to the column that needs a different width? If so, you can use the class to manipulate width:
HTML
<table width="650">
<tr>
<td>normal</td>
<td>normal</td>
<td class="wider">wide</td>
<td>normal</td>
<td>normal</td>
</tr>
</table>
CSS
td.wider {
width: 250px;
}