Menu
Is it possible at all?
I have table that fills its container. (width 100%) Two of its columns (1st and 3rd) have minimum width, but middle one does not.
When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed).
Thanks.
There is simplified code of what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
352
Change column width To change the width to a specific measurement, click a cell in the column that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Column Width box, and then specify the options you want.
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
If you want to set the width of the table column, you can use some CSS. You need to use the width property. In the example below, we set the width of the the <table> element to 100%. Then, in the HTML part, we distribute the table width of 100% among <col> elements having span attributes.
Definition and Usage. The column-width property specifies the column width. The number of columns will be the minimum number of columns needed to show all the content across the element. column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser.
If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the <body> element. To set the size of a specific column, add the style attribute on a <th> or <td> element: To set the height of a specific row, add the style attribute on a table row element:
You could do this with some basic CSS styling & media queries, here's an example
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
@media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
So when the screen is smaller than 500px, the 2nd column will hide.
Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
