How to fix bottom column ? Width 50% not really working. I want to do 2 row and 3 row bottom same width.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td style="width:50%;">Cell A</td>
<td style="width:50%;">Cell B</td>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
Table columns are inter-connected. So that if you place some content that forces a cell to grow wider, the entire column grows wider.
That means that all rows must have the same number of cells. However, you can merge 2 or more cells by using colspan attribute.
If you want to have 2 columns on one row and 3 columns on others, you probably want to set 6 cells and use colspan in both cases:
td {
border: 1px solid #eee;
text-align: center;
}
<table style="width: 100%;">
<tr>
<td colspan="3" style="width:50%;">Cell A</td>
<td colspan="3" style="width:50%;">Cell B</td>
</tr>
<tr>
<td colspan="2">Cell A</td>
<td colspan="2">Cell B</td>
<td colspan="2">Cell C</td>
</tr>
</table>
I made them 6 columns as it's easier to visualize. But, in reality the 2 columns on each side can be merged, as they are always colspan-ed together:
td {
border: 1px solid #eee;
text-align: center;
}
<table style="width: 100%;">
<col width="33.3333%">
<col width="16.6667%">
<col width="16.6667%">
<col width="33.3333%">
<tr>
<td colspan="2">Cell A</td>
<td colspan="2">Cell B</td>
</tr>
<tr>
<td>Cell A</td>
<td colspan="2">Cell B</td>
<td>Cell C</td>
</tr>
</table>
Use colspan='2' on first row second column.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td style="width:50%;">Cell A</td>
<td colspan='2' style="width:50%;">Cell B</td>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
You can use colspan to tell the browser how many columns to want a cell to occupy:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td>Cell A</td>
<td colspan="2">Cell B</td>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell B</td>
</tr>
</table>
</body>
</html>
Related
I have a table.
<table style="margin-left: 20px" class="tg">
<tbody>
<tr>
<td class="tg- 0lax">Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
I want the margin between the question 1 and the answer 1 2px. And the margin between the answer 1 and question 2 , 10 px. I cant get i done. I did try the following things: style="margin-bottom / margin-top in the and , al well as padding 2px. But both doesnt work
<td></td> and <tr></tr> cant be given a margin. Although you can give them a padding when you set display: block; Then you can go on an set things like every second one should get a bigger padding at the bottom (as you wanted it). Here is a snippet with very basic styles:
tr {
display: block;
}
tr:nth-child(even) {
padding-bottom: 20px;
}
tr:nth-child(odd) {
padding-bottom: 2px;
}
<table>
<tbody>
<tr>
<td>Question 1</td>
</tr>
<tr>
<td>Answer 1</td>
</tr>
<tr>
<td>Question 2</td>
</tr>
<tr>
<td>Answer 2</td>
</tr>
</tbody>
</table>
Set border-spacing property 2px to the table, and then skip 5 rows to get 10px something like this:
<table style="margin-left: 20px;border-spacing: 2px;" class="tg">
<tbody>
<tr>
<td class="tg- 0lax" >Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
For the following table structure table border is showing in some browsers, and in some browsers it is not showing.
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
border-bottom:0px !important;
}
<table class="test-table">
<tbody>
<tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="2" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody>
</table>
See the below screenshot of table in browsers:
Firefox table
Chrome table
The Firefox table structure is the correct structure, but in Chrome it is not showing properly. What is wrong in this code? How to make the table structure same in every browser?
Set rowspan=4 for that Cell like below
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
}
<table class="test-table">
<tbody><tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="4" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody></table>
Here is the solution might be it help.
You have to add rowspan=4
Here is the example
I would like to have the cells of my table left aligned but at the same time autofit.
Example:
thead td {
background-color: yellow;
}
td {
border:1px solid #000;
}
<br/>
<p>
First table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column with some additional text (blah blah blah blah blah)</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
<br/>
<p>
Second table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
on the second table we clearly see that each cells are equal width.
This is not what I wanted.
I want to have each cells side by side without extra space between.
Extra space should be on the right.
Edit: an image of what I want:
Edit: if you don't want multilines in column use
white-space:nowrap; in `td` css
use :nth-last-child in your CSS to make it 100% in width
thead td {
background-color: yellow;
}
td {
border:1px solid #000;
}
thead td:nth-last-child(1){
width:100%;
}
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column </td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
try it help full
thead td {
background-color: yellow;
}
td {
border:1px solid #000;
}
thead td:last-child{
width:100%;
}
<br/>
<p>
First table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column with some additional text (blah blah blah blah blah)</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
<br/>
<p>
Second table
</p>
<br/>
<table style="width: 100%;">
<thead>
<tr>
<td>Title 1</td>
<td>Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
i have add some css
thead td:last-child{
width:100%;
}
Do you mean something like that?
<table style="width: 100%;">
<thead>
<tr>
<td style="width: 150px;">Title 1</td>
<td style="width: 150px;">Title 2</td>
<td>Title 3</td>
</tr>
</thead>
<tr>
<td class="block">First column</td>
<td class="block">Second column</td>
<td class="block">Third column</td>
</tr>
</table>
I need to use a striped table (boostrap) but with a scroll. In my code, i just call the class table-striped and the tables looks fine. Now i need to add a scroll to that same table keeping the same style. Is that posible? how?
Here is some of my code
<div class="row col-sm-12">
<div class="col-sm-7">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escor</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I don't know where to find the css code. I used a boostrap template.
Set a height and overflow-y: scroll in your style
table {
height: 30px;
overflow-y: scroll;
}
when data loading and the space are not enough for data, table will show a scroll.
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>
I want to create a table which has a wrapper and scroll if table exceeds the width.
It works fine without giving width to parent.
I tried giving class to still the result is same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="table-wrap">
<table>
<colgroup>
<col style="width: 350px"></col>
<col style="width: 350px"></col>
<col style="width: 350px"></col>
<col style="width: 350px"></col>
<col style="width: 350px"></col>
</colgroup>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>one two</td>
<td>one two</td>
<td>one two</td>
<td>one two</td>
<td>one two</td>
</tr>
<tr>
<td>threeeee</td>
<td>threeeee</td>
<td>threeeee</td>
<td>threeeee</td>
<td>threeeee</td>
</tr>
<tr>
<td>cell one two</td>
<td>cell one two</td>
<td>cell one two</td>
<td>cell one two</td>
<td>cell one two</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
fiddle reference (http://jsfiddle.net/8xznsvyt/)
It seems that you want to have a table with 5 columns, all 350px wide, wrapped inside a container that has width set on it. And you would want the table scroll horizontally if the container is narrower than needed for the table.
What happens in the fiddle is that the table is as wide as the container. This is a consequence of CSS table formatting rules. Consequently, the column width settings cannot be fulfilled. Browsers apply dynamic column allocation instead, dividing the available width between the columns according to their content requirements (in the fiddle, evenly, since the contents are identical).
The simplest fix is to set a width on the table explicitly:
col {
width: 350px;
}
table {
width: 1756px; /* 5 × 350 + 6, for columns and borders */
border-collapse: collapse;
white-space: nowrap;
}
table td, table th {
border: 1px solid #000;
}
.table-wrap {
width: 500px;
overflow: auto;
}
<div class="table-wrap">
<table>
<col><col><col><col><col>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>one two</td>
<td>one two</td>
<td>one two</td>
<td>one two</td>
<td>one two</td>
</tr>
<tr>
<td>threeeee</td>
<td>threeeee</td>
<td>threeeee</td>
<td>threeeee</td>
<td>threeeee</td>
</tr>
<tr>
<td>cell one two</td>
<td>cell one two</td>
<td>cell one two</td>
<td>cell one two</td>
<td>cell one two</td>
</tr>
</tbody>
</table>
</div>
I have simplified the HTML and CSS code somewhat. There is no need for the colspan element; it is neither part of the problem nor part of a solution. The column widths are best set in CSS