I have a situation similar to the one represented in this fiddle,
where there is a table with
table {
width: 100%;
margin-right: 30px;
}.
inside a div.
The problem is that when I apply the margin to the table, it goes out of its parent div. How can I avoid that?
Add a padding-right on the div instead :
div {
padding-right: 30px;
}
table {
width: 100%;
}
demo
The width applies to the actual content of the element, so you have a table with 100% wide content, and on left of that you add some margins pushing the width over 100%, thus the right side of the table extends beyond the parent's right edge. Probably you should go with padding on the parent instead of margin on the table, or an additional wrapper with just the margin.
table {
width: 100%;
border:1px solid green;
border-collapse: collapse;
}
.inner{
margin-left:100px;
}
<div>
<div class="inner">
<table border="1">
<thead>
<tr>
<th>HEADER 1</th>
<th>HEADER 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I have a table and whenever there are too many rows it goes off the bottom of the page and exceeds its containers height.
<body>
<div class="myContainer">
<table class="scrolldown">
<!-- Table head content -->
<thead class="test1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<!-- Table body content -->
<tbody class="test2">
<tr>
<td>Content</td>
<td>Content</td>
</tr>...
</tbody>
</table>
</div>
<body>
CSS
.myContainer {
outline-style: solid;
outline-color: #c7d2fe;
height: 100px
}
tbody td,
thead th {
width: 200px;
border-right: 2px solid black;
}
td {
text-align: center;
}
How can I make it so that the table becomes scrollable once it would extend past its containers height?
Fiddle
You can do this by adding overflow: auto; to the wrapper div .myContainer.
This will add a scrollbar to the container when the table is taller.
Fiddle
I want a HTML <table> to be just the size it needs to be.
Without specifying anything it will span the whole width. Setting width="auto" doesn't work.
Do not set width on the table at all. This will make the table only as wide as needed by its content. If this looks too wide, look at the table content to see what causes width requirements in cells. For example, if you have long text in a cell, it will expand the cell to be as wide as needed, within the available width. If you wish to limit this, you need to set width or max-width on the content of a cell, or the cell itself, or the table.
Use width: fit-content; for the table. See the difference below:
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.container {
width: 300px;
border: 1px solid red;
display: flex;
flex-direction: column;
}
table#fit-content {
width: fit-content;
}
<div class='container'>
<button>Regular</button>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class='container'>
<button>With Fit-Content</button>
<table id='fit-content'>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
You need to use CSS style instead of table attributes.
table
{
width:auto;
}
This one is driving me mad, unfortunately I'm not very good in CSS yet.
How can I get a horizontally and vertically centered text-link into a table cell which is fully clickable?
I researched, tried several solutions, none of them worked. Here is my best approach so far:
HTML
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
CSS
.dataTable td a {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
display:block;
text-decoration: none;
}
.dataTable td {
display:inline-block;
}
This one gives me centered text, but the link only covers the width of the cell, not the height. If I change the css for the link to display:inline-block, then the full cell is clickable, but the text is not vertically centered anymore.
I need both. Help!
i think you should remove this :
.dataTable td {
display:inline-block;
}
see this fiddle
I think that's what you want:
.dataTable {
text-align: center;
}
.dataTable a {
display: inline-block;
width: 100%;
height: 100%;
}
/* Just for better visualization */
.dataTable td {
background: red;
}
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
If you want to increase td's height, you should do it by modifying a's height. Otherwise, the link will not occupy the whole cell's height. You can achieve that with height property or also with line-height.
.dataTable {
text-align: center;
}
.dataTable a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 5; /* To get a 5 text lines high cell */
}
.dataTable td {
/* Just for better visualization */
background: red;
}
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
Wrap your text in a
div style="padding-top:5px;".
That will center it approximately.
I have a table with the following code that is giving me some trouble:
Demo http://jsfiddle.net/hF3vt/
[Html]
<table>
<tr>
<th style="width: 18%;">Col 1</th>
<th style="width: 12%;">Col 2</th>
<th style="width: 13%;">Col 3</th>
<th style="width: 7%">Col 4</th>
<th style="width: 7%">Col 5</th>
<th style="width: 6%">Col 6</th>
<th style="width: 5%">Col 7</th>
<th style="width: 13%">Col 8</th>
<th style="width: 16%">Col 9</th>
<th style="width: 3%">Col 10</th>
</tr>
<tr>
<td>Some</td>
<td>Data</td>
<td>Stuff</td>
<td>foo</td>
<td>bar</td>
<td>etc</td>
<td>whatever</td>
<td>stuff</td>
<td>Alotofdatainthiscell</td>
<td>Yes</td>
</tr>
</table>
[CSS]
table {
display: block;
margin: 30px 0 auto 0;
width: 100%;
max-width: 1300px;
text-align: left;
white-space: nowrap;
border-collapse: collapse;
z-index: -1;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
As you can see by this I am trying to have the table sized dynamically according to the window until it hits 1300px and then has a set size.
Everything works fine until I have too much data in a single cell, causing it to become wider than it should for some reason. To fix this I tried to add the ellipsis overflow but that did nothing when I added it. I then remembered that max-width is needed so I added classes to each cell to match the header percent sizes in max-width but that didn't work for some reason unless I specified a max-width in pixels. I was wondering if theres a better way to prevent this ellipsis overflow thing without having to specify it on every cell, or if theres a reason that max-width doesn't work with percents.
Summary:
Long text is ignoring the width of cells and I want it to turn into ellipses when its too long but its not for some reason.
When you align it proper border then it will display in well manner. without border this is because you align the width to every table header and not to <td>.
Here is the updated fiddle:
Demo Here
You can do this by setting a width for the table and you could also use
word-wrap:break-word
Further, if you want to wrap text of an element, you have to specify the width or max-width of that element so that browsers know how to wrap the text content.
In order to prevent really long words to break out of boundaries.
And for table,
table-layout:fixed;
Hence,
Change CSS to this:
table {
display: block;
margin: 30px 0 auto 0;
width: 100%;
max-width: 1300px;
text-align: left;
white-space: nowrap;
border-collapse: collapse;
z-index: -1;
table-layout:fixed;
}
td {
max-width:100px;
overflow: hidden;
word-wrap:break-word;
white-space: nowrap;
text-overflow:ellipsis;
}
EDIT:
You may like to set overflow to auto to show the lot of data.
Is it possible to have a table with width 100% (so the table fits the screen size), where the first and the last column have a fixed width, and the columns between take the rest, both 50%.
Like:
+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px; | with dynamic, equals next column | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
Try this:
As you can see the two centre column remain equal sized, due to the table-layout:fixed, even when the content is of different length. Try adding more and less content to the two centre columns.
JSFiddle: http://jsfiddle.net/RtXSh/
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
HTML
<table>
<tr>
<td style="width:300px;">
test
</td>
<td>
test test tes test test
</td>
<td>
test
</td>
<td style="width:50px;">
test
</td>
</tr>
</table>
Try using the pseudo element first-child and last-child
If I'm not mistaken the other columns will align equally by themselves. You might need to use the !important statement behind the first-child and last-child widths.
table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
td:first-child{ width: 100px; }
td:last-child{ width: 100px; }
<table>
<tr>
<td>100px</td>
<td>some text</td>
<td>some text</td>
<td>100px</td>
</tr>
</table>
However, as nurettin pointed out, if you use a thead and tbody section you have to style the header. Styling the td:first-child and td:last-child will not work.
table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
th:first-child{ width: 100px; }
th:last-child{ width: 100px; }
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>100px</td>
<td>some text</td>
<td>some text</td>
<td>100px</td>
</tr>
</tbody>
</table>
In my opinion, the simple, nice and easy way is that don't use the px and % together. If you are using table width 100%, then define width of first and last column in % as well. If you are interested in that, here is how you can do:
CSS:
.mytable {
width:100%;
border: 1px solid green;
}
.left{
width:30%;
border-right:1px dashed blue;
}
.mid1{
width:30%;
border-right:1px dashed blue;
}
.mid2{
width:30%;
border-right:1px dashed blue;
}
.right{
width: 10%;
border-left:1px dashed blue;
}
HTML:
<table class="mytable">
<tr>
<td class="left">Left Column, 30%</td>
<td class="mid1">Mid 1, 30% </td>
<td class="mid2">Mid 2, 30% </td>
<td class="right">Right, 10%</td>
</tr>
</table>
This can be handled by adding the style table-layout:fixed to the table element, and simply not specifying any width value for the columns you wish to evenly divide the width remaining after the fixed columns have been accounted for.
Further, using combinations of <colgroup> can provide robust variable-width scenarios.
I've created an example at JSFiddle: https://jsfiddle.net/3bgsfnuL/1/
<div style="position:relative; height:500px; width:100%;">
<table style="height:100%; width:100%; table-layout:fixed; text-align:center; border-collapse:collapse;">
<colgroup colspan="1" style="width:200px"></colgroup>
<colgroup colspan="3">
<col/>
<col style="width:30px"/>
<col/>
</colgroup>
<colgroup colspan="1" style="width:200px"></colgroup>
<tbody>
<tr>
<td style="background-color:silver;">left fixed</td>
<td style="border-right:1px solid black;">col 1</td>
<td style="background-color:red; color:white; border:1px solid black;">col 2</td>
<td style="border-left:1px solid black;">col 3</td>
<td style="background-color:silver;">right fixed</td>
</tr>
</tbody>
</table>
</div>
Nobody mentioned this one here <th> trick:
table{ table-layout: fixed; width: 100%; }
th:first-child{ width: 300px; }
<table>
<thead>
<tr>
<th>yourfirst300pxcolumn</th>
<th>fixedwidth</th>
<th>fixedwidth also</th>
</tr>
</thead>
<tbody>
<tr><td>300</td><td>something</td><td>something else</td></tr>
</tbody>
</table>
Note that in HTML5/CSS3, you can use grid layout to have more control over your tables. It's not that useful for this specific example, with pixel widths, where you can use table-layout:fixed as in Bazzz's answer, but it is useful if you want to use something like min-content.
The following works out of the box on Chrome and Firefox, but not in Safari:
table {
width: 100%;
display: grid;
grid-template-columns: 300px 1fr 1fr 50px;
/* Or, more usefully: */
/* grid-template-columns: min-content 1fr 1fr min-content; */
}
td {
display: block;
}
/* ignore <tr> when laying out the grid; just lay out the cells */
tr {
display: contents;
}
/* browsers can inject <tbody> into the DOM even if it's not in the HTML */
tbody {
display: contents;
}
(Note though that the table border-collapse property doesn't work in this layout, so you may have to fiddle with CSS pseudo-classes like :last-child in order to get your borders to behave the way you want.)
In Safari this doesn't work -- the rows don't break properly. (Although it does work if you use nested <div> elements instead of a <table> and apply similar styles.) However, a simpler layout with just one dynamic 1fr column does work in Safari:
table {
display: grid;
grid-template-columns: 300px 1fr 50px;
}
tbody {
display: contents;
}
tr {
display: contents;
}
td {
border: 1px solid #c0c0c0;
}
What about using jQuery for this and calling javascript function once your table is created or some other event (like click) happens?
See here (I created jsfiddle playground for this)
What it does is that it checks the width of fixed elements (width of the whole table, first and last cell). Then it calculates and assigns the width for the rest of the cells which should have the remaining width divided between them (based on how many there are and how much space is left). Of course this is just quick example of possible solution. It needs polishing (checking null objects, if remaining width is greater than 0, ...)