I have an html table using colspan=2 to merge cells. I need to make sure merged cells have a given width. However, when two cells are not merged, I need to have their total width not exceed the width of the merged cells. How can I achieve the latter?
In the first table, the text in the merged cells is wrapped, which is fine.
In the second table, the text in the non-merged cells is not wrapped, which makes the table too wide.
I have created a JSFiddle.
My html is:
<table border="1">
<tr>
<td>xyz 1</td>
<td>xyz 2</td>
<td>xyz 3</td>
<td>xyz 4</td>
</tr>
<tr>
<td colspan="2" class="twoColWidth">
xyz aaaa ffffffffffffff
</td>
<td colspan="2" class="twoColWidth">
xyz bbbb fff
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>xyz 1 33333 444444</td>
<td>xyz 2</td>
<td>xyz 3</td>
<td>xyz 4 33333 444444</td>
</tr>
<tr>
<td colspan="2" class="twoColWidth">
xyz aaaa ffffffffffffff
</td>
<td colspan="2" class="twoColWidth">
xyz bbbb fff
</td>
</tr>
</table>
and my CSS is:
.twoColWidth {
width: 50px;
}
Give your table a fix width, and use colgroup with col to give all the columns the same width:
<table border="1" style="width: 175px;">
<colgroup>
<col span="4" width="25%" />
</colgroup>
<tr>
<td>xyz 1</td>
<td>xyz 2</td>
<td>xyz 3</td>
<td>xyz 4</td>
</tr>
<tr>
<td colspan="2">
xyz aaaa ffffffffffffff
</td>
<td colspan="2">
xyz bbbb fff
</td>
</tr>
</table>
table { width: 100px; }
just set a max width for the entire table?
If the tables will be always like you stated, you can try e.g. nth-child pseudo-class selector:
tr:nth-child(2) {
width:20px;
}
It will influence always the even/second row in table.
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
this is what table i need
I can easily get first and second row good but when i'm trying to make row third, I'm destroying row two.
I tried with width attribute and colspan but nothing work.
<table border="1px" width="100%">
<tr>
<td colspan="6">Cell 1</td>
</tr>
<tr >
<td colspan="3">Cell 2</td>
<td colspan="3" >Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
<td colspan="2">Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</table>
A <table> will conform to it's content by default so there's no need for each column to be equal in width. So manually assign equal column widths by assigning table-layout: fixed to <table> then an equal width for each column by either assigning each width to the <th> in the <thead> of the first <tr> or lacking that assign widths to the <td> of the first <tr> (of course td or th as a selector works as well), see example below.
table {
table-layout: fixed;
}
td {
width: 16.5%;
text-align: center;
}
<table border="1px" width="100%">
<tr>
<td colspan="6">I</td>
</tr>
<tr>
<td colspan="3">II</td>
<td colspan="3">III</td>
</tr>
<tr>
<td colspan="2">IV</td>
<td colspan="2">V</td>
<td colspan="2">VI</td>
</tr>
</table>
My table consists of 6 columns and 5 rows. In each row, the 5th column needs to hold multiple cells stacked on top of each other. Is there a way I can do this without nesting a new table in the 5th column of each row?
<tr>
<td><img class="image" src="Posters/suicidesquad-poster1.jpg"></td>
<td>Suicide Squad</td>
<td>PG-13</td>
<td>2 Hour(s) 3 Minutes</td>
<!-- Here I need to add two rows within the 5th column
<td>Row One </td>
<td>Row Two </td>
The sixth column will be the same as the others -->
<td>CC, DV</td>
</tr>
You can put 2 DIVs into each of those TDs:
<tr>
<td><img class="image" src="Posters/suicidesquad-poster1.jpg"></td>
<td>Suicide Squad</td>
<td>PG-13</td>
<td>2 Hour(s) 3 Minutes</td>
<td>
<div class="my_extra_cells">Row One</div>
<div class="my_extra_cells">Row Two </div>
</td>
<td>CC, DV</td>
</tr>
Just create a CSS rule for .my_extra_cells to have it look as you like.
If you want to use rowspan instead of divs, I believe you want this:
<table border="1">
<tr>
<td rowspan="2">
<img class="image" src="Posters/suicidesquad-poster1.jpg">
</td>
<td rowspan="2">Suicide Squad</td>
<td rowspan="2">PG-13</td>
<td Rowspan="2">2 Hour(s) 3 Minutes</td>
<td>Row One</td>
<td rowspan="2">CC, DV</td>
</tr>
<tr>
<td>Row Two</td>
</tr>
</table>
Yes you use the col-span or row-span
<table>
<tr>
<td rowspan="2">Two High</td>
<td rowspan="2">Two High</td>
<td>Single</td>
</tr>
<tr>
<td>Single</td>
</tr>
</table>
This will give you the desired effect, in reality it "merges" <td>'s together while preserving the ones you want to appear singular.
Take a look here for further information around this attribute.
It's possible create this table with rowspan ??
|---------|---------|
| 1 |4 |
|---------| |
| 2 |---------|
|---------|5 |
| 3 | |
|---------|---------|
Every row inside the second column have 1.5 ?
I think that its possible play with the attribute 'height' or maybe create another table inside the second column...
But is it possibble only with rowspan or colspan?
Rowsapn must be an integer, but you can use
td {
border: 1px solid;
padding: 20px;
}
<table>
<tr>
<td>1</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="2">5</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
I've created two tables: main table and a sub table. Within main table, I've created 2 columns with 3 rows. These three for 1, 2, 3 in your example. And in the other column I've created another small table with one column and two rows.
<table border=1 width='200' height='100' cellpadding='0' cellspacing='0'>
<tr>
<td width='100'> </td>
<td rowspan="3">
<table border='1' width="100" cellpadding='0' cellspacing='0' height='100%'>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Explanation:
We cannot set rowspan in decimal values like 0.5.
So, make each cell's rowspan double so that 0.5 becomes 1 and 1.5 becomes 3 effectively.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tbody>
<!-- ROW 1 -->
<tr>
<td rowspan="2">1</td>
<td rowspan="3">4</td>
</tr>
<!-- ROW 2 -->
<tr>
</tr>
<!-- ROW 3 -->
<tr>
<td rowspan="2">2</td>
</tr>
<!-- ROW 4 -->
<tr>
<td rowspan="3">5</td>
</tr>
<!-- ROW 5 -->
<tr>
<td rowspan="2">3</td>
</tr>
<!-- ROW 6 -->
<tr>
</tr>
</tbody>
</table>
</body>
</html>
I've been designing webpages for some time now, and for one of my webpages, I need to design a table with 6 columns and 3 rows. The first column need to have 3 rows, while the other 5 columns only need 2 rows. I can make it using this CODE:
<tr><td class="style3">7:00 AM
</td>
<td class="style3" rowspan="2">
</td>
<td class="style3" rowspan="2">
</td>
<td class="style3" rowspan="2">
</td>
<td class="style3" rowspan="2">
</td>
</tr>
<tr><td class="style3">7:30 AM
</td>
</tr>
<tr><td class="style3">7:59 AM
</td>
<td class="style3">
</td>
<td class="style3">
</td>
<td class="style3">
</td>
<td class="style3">
</td>
</tr>
How can I make it so that the bottom border of the first row of the 5 columns are exactly in the middle of the second row of the first column?
It means that the line of the bottom border of the first row of the 5 columns is in the middle of the value "7:30 AM" from the first column, second row. I know it is quite confusing but I cannot show you an image of how I want it to look like because I just join here and I don't have 10 reputations to post an image. Please understand my logic.
rowspan=2 means, the column will span two rows, hence if you are applying this to the first column of the first row, the the next row should have one less column. For every column you do a rowspan="n" on, you need to omit that column from the next "n-1" number of rows.
The following snippet will make it clear to you:
table, td {
border: 1px solid gray;
border-collapse: collapse;
}
td { padding: 8px; }
<table>
<tbody>
<tr>
<td class="style3">7:00 AM</td>
<td class="style3" rowspan="2">Event 1</td>
<td class="style3" rowspan="2">Event 2</td>
<td class="style3" rowspan="2">Event 3</td>
<td class="style3" rowspan="2">Event 4</td>
</tr>
<tr>
<td class="style3" rowspan="2"></td>
</tr>
<tr>
<td class="style3" rowspan="2">Event 5</td>
<td class="style3" rowspan="2">Event 6</td>
<td class="style3" rowspan="2">Event 7</td>
<td class="style3" rowspan="2">Event 8</td>
</tr>
<tr>
<td class="style3">7:59 AM</td>
</tr>
</tbody>
</table>