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
Related
My table is 100% width, how can I say in CSS: "the width of columns 2 and 3 should be as small as possible, without the content breaking."
I added style width, but it's not very recommended for the responsive. I didn't found any rule to do this.
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
<p>I would like to do a bit like this (but of course without specific width) :</p>
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th style="width:40px">Value</th>
<th style="width:40px">ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
Thank you !
You can set the width on table cells and it'll still expand to fit the content. Set the width to 0 and to stop it breaking can use the white-space:nowrap; css property. Just apply it to the columns you need using the nth-child() (and derivatives) selectors. It's also good to style your table in css rather than adding the style attribute to each cell, mainly when debugging problems. See the following example:
table {
width:100%;
}
table td:last-child, table td:nth-last-child(2) {
width:0px;
white-space:nowrap;
}
<table>
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes and No</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
More info here on css selectors the white-space property
th {
width: 100%;
}
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
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>
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>
I have 2 tables in same row of the big table, like this:
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Type A</td>
</tr>
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>10%</td>
</tr>
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>40%</td>
</tr>
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>
But when the text in first column (e.g. "Type A") is too long, it makes a new line. Then data in same row is not in same row. ("Type B" is not in same row with "90%" and "60%")
Return data is in xml format, like this:
<DataGroup Storage="Storage 1">
<DataRow Type="Type A" Percentage="10%"/>
<DataRow Type="Type B" Percentage="90%"/>
</DataGroup>
<DataGroup Storage="Storage 2">
<DataRow Type="Type A" Percentage="40%"/>
<DataRow Type="Type B" Percentage="60%"/>
</DataGroup>
I have to draw borders to make it look like one table. Render in cshtml file.
How can I resolve this? Many thanks.
You can add the border: 1px solid black; to CSS to make it like a table. For HTML, you just need one table.
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A
<br>new line</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
</table>
You can stop word-wrap with white-space: nowrap; although it stops honoring the width element.
tr td:nth-child(1){
width:20px;
color:red;
white-space: nowrap;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
<table>
I'm assuming, you have a good reason for having tables within table. Then your problem is your semantics. You are not outputting the 'Type B', '90%' and '60%' on the same rows of the big table. Your sub-tables can either be aligned by vertical-align as blocks or you need to rework your big table semantics to something like this.
<table class="big">
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type A Lorem ipsum</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>10%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>40%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>
I want to center a <td> element in a row, when other row has many <td> elements. But the first row's <td> element always sits in the first column position, and it's not moving to center.
Here is my code sample:
<table border="1">
<tr>
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
and here is the result, I want the one element to get in center without having other element, and it should take same width and height of first column elements. Images is here -
If I am interpreting your question correctly, you don't want the <td> element to span the entire row. Instead you want it to be positioned in the "center" column.
If you know the dimensions in advance, you can simply create empty <td>s before it and hide them.
table { empty-cells: hide; }
<table border="1">
<tr>
<td></td> <!-- Empty TD for positioning -->
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
It seems you want a caption instead of a cell:
td {
border: 1px solid;
}
<table>
<caption>Problem</caption>
<tr>
<td>65</td>
<td rowspan="3" style="width: 100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
<table border="1">
<tr>
<td style="border:5px"></td>
<td>56</td>
<td style="border:5px"></td>
</tr>
<tr>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>66</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>66</td>
<td>87</td>
</tr>
</table>
if you want column then you can remove that style part
and this is the result:
<table border="1">
<tr align="center">
<td colspan="3" align="center">Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px" align="center">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td align="center">86</td>
<td>87</td>
</tr>
</table>
The amount of columns in a table are defined by the maximum amount of columns in any given row of a table. Since your table uses 3 columns, the row with only a single td cell will not fit across.
To fix this, the colspan attribute is what you want.
However, since you want to keep the cell at the size of others in the same column, you'll use empty td elements to do this. Example below:
table,
td {
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td>1 column</td>
<td></td>
</tr>
<tr>
<td>1 column</td>
<td>1 column</td>
<td>1 column</td>
</tr>
</table>