I'm having trouble getting my table to behave. The content keeps overflowing and my attempts to restrict it are not producing the desired effect.
This is my markup:
<div class="repeatingdiv">
<div class="hastitle">Some title</div>
<div class="hastable">
<table>
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
I then have some style. The td's are overflowing, but I didn't have any luck setting their overflow to hidden/auto. I did have better luck setting overflow in the hastable class that contains the table. But I'm still having trouble getting Firefox to respect the width distribution for the 3 columns: 30%, 35%, 35%. I also tried setting min-width, but still no luck. I have several of these tables on the page, and each one takes its own width. Any help with this table mess?
.repeatingdiv { }
.hastitle { margin:0 10px; padding:3px 3px 1px 6px; }
.hastable { overflow:hidden;
text-overflow: ellipsis;
margin:10px;
padding:10px;
}
table { }
table tbody { width: 100%; }
tr { width: 100%; }
td.col1 { width:30%; min-width:30%; }
td.col2 { width:35%; min-width:35%; }
td.col3 { width:35%; min-width:35%; }
Tables are notoriously difficult to style. Try adding this to your CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
I'd also suggest using actual HTML COL / COLGROUP elements to define your columns, as so:
<table>
<colgroup class="col1" />
<colgroup class="col2" />
<colgroup class="col3" />
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
Do take note that, despite this, cells with overflowing data will force the containing cell, row, and table to expand to fit. CSS overflow: auto / hidden / scroll do not affect cells.
Ref:
CSS: Table Layout,
HTML: COLGROUP
Wrap your table in a div and set overflow for the div.
<div style='overflow:scroll;'>
<table>
...
</table>
</div>
Related
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
P.S : Please don't mark as duplicate until you have read the entire question
I have a table where in I want to give fixed width to the columns as I want to display them dynamically. The width of the table is 100%. So in that table, only 1 column or 3 or 6, etc can be displayed. But the problem is if in a scenario I have only 1 column the data in that table occupies the entire 100% table even though i have given fixed width to the column. I want the column width to be fixed irrespective of the table width. Please guide where I am wrong. Below is the code I have been trying.
table {
table-layout: fixed;
word-break: break-all;
}
table td {
border: 1px solid;
overflow: hidden;
}
<table width="100%" cellspacing='0' cellpadding='0'>
<col width="100px" />
<col width="50px" />
<col width="50px" />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
</table>
Add hidden column to the end of table.
Table will be 100% width and resize hidden column than you resize the page.
Code example:
table
{
table-layout: fixed;
word-break: break-all;
border-collapse: collapse;
width:100%;
}
td
{
height:50px;
border: 1px solid;
}
th
{
height:50px;
border: 1px solid;
}
.F
{
width:100%;
border:none;
border-left:1px solid;
}
<table>
<col width='200px' />
<col width='100px' />
<col width='50px' />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th class='F'></th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
<td class='F'></td>
</tr>
</table>
Here is the complete code.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
</body>
</html>
Here is a slightly different approach. In this example, it will take an auto width table and then fix the width and column widths. I've found this useful where I have an auto width table that I want to filter without the table resizing.
This example makes use of the col and th elements on a well formed table.
The use of the fixed class is added so that the table can be reset easily.
/*jQuery - mistajolly - fix table widths*/
var table = $(this);
if(!table.hasClass('fixed')){
table.width(table.outerWidth(true));
table.addClass('fixed');
var cols = table.find('col');
table.find('th').each(function(index){
$(cols[index]).width($(this).outerWidth(true)).addClass('fixed');
});
}
/* Reset and remove fixed widths */
if(table.hasClass('fixed')){
table.removeClass('fixed').css('width','');
table.find('.fixed').each(function(index){
$(this).removeClass('fixed').css('width','');
});
}
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
Just to frame you. Look at the following code.
Basically I have a table inside a div. When the table gets too big the overflow hidden triggers.
PROBLEM: in IE6 the "some text" gets hidden as expected but the floated span not.
Is there a way around of fix it?
#wrap{
overflow:hidden;
height:20px
}
span{
float:left;
height:10px;
width:10px;
background:url(image.jpg) no-repeat 0 0;
}
<div id="wrap">
<table>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
</table>
</div>
Try giving height:1%; for ie6 css. as below.
wrap{
overflow:hidden;
height:%;
}