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>
Related
Rowspan And Colspan For Building HTML Tables.
I want the first five column in a single row without any data as shown in editable fig. ,Can use rowspan or colspan.
Only The Last Two Column is as it is as shown in the editable fig. And There should be a row before that two column which is the combination of the five columns and that should be blank.
<div class="row">
<div class="col-12">
<table>
<thead>
<tr>
<th>Savings for holiday!</th>
<th>Date!</th>
<th>Year</th>
<th>Month</th>
<th>Time</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>$100</td>
<td>10/10/2020</td>
<td>2020</td>
<td>January</td>
<td>4:30pm</td>
<td>hrishi</td>
<td>male</td>
</tr>
</tbody>
<tbody>
<tr>
<td>$100</td>
<td>10/10/2020</td>
<td>2020</td>
<td>January</td>
<td>4:30pm</td>
<td>hrishi</td>
<td>male</td>
</tr>
</tbody>
</table>
</div>
</div>
See the code below.
<table>
<tr>
<th colspan="5" rowspan="3" width="300"></th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
</table>
I applied the bootstrap css class in css file and got my answer.
<table>
<tr>
<th colspan="5" rowspan="3" class="w-70"></th>
<th>Name</th>
<th>Gender</th>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
<tr>
<td>hrishi</td>
<td>male</td>
</tr>
</table>
And add the width property in style.css file -
.w-70 {
width: 70%;
}
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>
This may sound like a basic question. I know how to set column widths by using the width tag. And by using CSS.
Take this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="en-gb" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.tableStyle {
border-collapse: collapse;
border: 1px solid #000000;
}
</style>
</head>
<body>
<table class="tableStyle" style="width: 100%">
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
</table>
</body>
</html>
If possible, what I would like to do is set columns 2 and 3 to the size needed to show the content for those columns. And for column 1 to expand to fit.
Now, I know I can set the last 2 columns to, let us say, 10% each. And if I set the table width to 100% then column 1 will expand to fit.
But, since this HTML template will be used for over 30 languages, the column headings have more characters in some languages. In addition, if the font size is changed it would also throw it out.
So is there any way to get the last 2 columns to auto-size to content and first column expand to fit?
Thank you.
Andrew
Use the <col> tag, which represents each column in the table, and style that. Here are two different ways to do what you want:
Set the width of the first column to 100%
table {
width: 100%;
}
<table border="1">
<col style="width: 100%">
<col>
<col>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
</table>
Set the widths of the two other columns
table {
width: 100%;
}
<table border="1">
<col>
<col style="width: 11%">
<col style="width: 11%">
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
<tr>
<td>This is long text</td>
<td>Date Column</td>
<td>Date Column</td>
</tr>
</table>
Here is the CSS you need to apply to all 3 columns
.tableStyle {
border-collapse: collapse;
border: 1px solid #000000;
table-layout:auto;
}
It will autosize for you. It make take a little longer to load but it will do the trick! Hope this helps!
use colspanin HTML for making two column width into one column
I've searched online and I can't find an answer, so I'm going to ask this question.
The new data will always be formatted in the following and will be populated in id="content"
<tr>
<td>name</td>
<td>age</td>
<td>gender</td>
</tr>
I read you need to have <div> inside a <td> if you're going to put <div> inside a <table>. Right now, the format is not correct. All of the new data are in column one instead of each of them in each row.
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<div id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</div>
<td>
</table>
Update
re-reading your structure you most likely need
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</tbody>
</table>
Original answer
You can't have tr as direct children of a div.
You need to use a table
Either
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<table id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
<td>
</table>
or
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<div id="contents">
<table>
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
</div>
<td>
</table>
I think that you want the table to be inside the div completely, and all the new data be in a corresponding row, like this:
<div id="contents">
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
</div>
Right now the format is wrong because of you are trying to add whole data into a single cell (<td> element) which isn't right way to do.
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