I set a fixed width in td, but it doesn't work when the table is overflow. What I have tried is the below code.
td {
width: 192px;
}
It can resolve by following 2 steps.
1 - On table set width:100%
2 - On td of table use class like this when your data get overflow.
.dataRow
{
word-wrap: break-word;
word-break: break-all;
}
3 - after above 2, you can also set width as per your requirement, if needed.
You can change in css with td { width:20px} or you can change it inline <td style="width:20px">.
This can be achieve using display property.
Check below Snippet.
.wrapper {
width: 180px;
border: 1px solid #000;
}
.table-scroll {
width: 100%;
table-layout: fixed;
}
.table-scroll tbody {
display: block;
overflow: scroll;
}
.table-data {
border: 1px solid #0F0;
}
.table-detail {
border: 1px solid #F00;
}
td.first {
width: 200px;
display: inline-block;
}
<div class="wrapper">
<table class="table-scroll table-data">
<tbody>
<tr>
<td class="first">HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
</tbody>
</table>
</div>
Related
As you can see, in order to make the entire table cell link-clickable, I used td a {display: block}. The problem is td a {vertical-align: middle} no longer works with display: block. Not sure how else to center it vertically. Any help would be greatly appreciated.
P.S. I avoided using line-height because my link needs to be multi-line.
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: block;
height: 100px;
vertical-align: middle !important;
}
<table>
<tr>
<td>TEXT</td>
<td>LINK</td>
</tr>
</table>
You can use an auxiliar span and center it inside the anchor, so its content is free to move and align.
E.g.:
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: flex;
height: 100%;
}
td a span {
height: fit-content;
align-self: center;
}
<table>
<tr>
<td>TEXT</td>
<td>
<a href="">
<span>
A VERY LONG LINK MAY BE LIKE THIS ONE, I GUES, RIGHT? HERE WE GO :D
</span>
</a>
</td>
</tr>
</table>
Added span in anchor tag and made a CSS change for the output
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: table;
position: relative;
height: 100%;
width: 100%;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
}
<table>
<tr>
<td>TEXT</td>
<td><span>LINK</span></td>
</tr>
</table>
Is it possible to define where overflow: hidden begins based on padding?
For example, I currently have a table in which I have a long string. There is padding on the left, but the length of the string exceeds the td, so overtflow hidden is triggered. I would like the overflow: hidden to trigger at the beginning of the padding rather than the end of the td.
Essentially I would like the overflow: hidden to begin at the start of the far right red line.
.order-table td {
padding: 1em 3px;
border-left: #ddd 1px solid;
font-size: 0.9em;
overflow: hidden;
}
Simply wrap your content in another element and apply the overflow: hidden to that instead:
table {
width: 100px;
table-layout:fixed;
}
td {
border: 1px solid red;
padding: 10px;
}
.inner {
border: 1px solid blue;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tr>
<td><div class="inner">123456789012345678901234567890</div></td>
</tr>
</table>
Add text-overflow:ellipsis to add an ellipse at the end. Hopefully this fix's your issue.
/*** USELESS STYLES ***/
html,
body {
background: #FFF;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 14px;
line-height: 1.4em;
}
.element:before {
content: '> ';
}
/*** .USELESS STYLES ***/
.element {
background: #F1F1F1;
color: #555;
padding: 10px 15px;
overflow: hidden;
border: 1px solid #ccc;
margin: 10px;
text-overflow: ellipsis;
white-space: nowrap;
width: 50%;
}
<div class="element" title="This is some text that will need to cut because it will be far to long for users to see but the user should know what it means, and they can even click to find out more about this if your site supports this.">Hover Over Me. This is some text that will need to cut because it will be far to long for users to see but the user should know what it means, and they can even click to find out more about this if your site supports this.</div>
The solution like the following example should work:
div {
border:1px solid #000;
padding:20px;
width:50px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div>testtesttesttesttesttest</div>
See on fiddle: https://jsfiddle.net/bm3upfoc/
table {
width: 300px;
table-layout: fixed;
}
td {
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
td span {
float: right;
}
.inner {
border: 1px solid blue;
overflow: hidden;
}
<table>
<tr>
<td>
<span>
something
</span>
</td>
<td>
<span>
1234567890ABCDEFG
</span>
</td>
<td>
<span>
something
</span>
</td>
</tr>
</table>
Wrap the table content to span
<span>
a Very Long line of text and hope this helps
</span>
then add the CSS TD SPAN, float it to right
TD SPAN{
float:right
}
I find that if I put an image inside a table cell like this (JSFiddle):
<table style="height: 300px; border: 1px solid black">
<tr>
<td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
</tr>
</table>
There will be a small space below the image, making the vertical align not exact:
Does any one know what is happening here?
I tried to add vertical-align: middle to the td, but it makes no difference.
Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.
img {
display: block;
}
<table style="height: 300px; border: 1px solid black">
<tr>
<td>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" />
</td>
</tr>
</table>
JSFiddle
You have to set the img as "display:block"
img {display:block}
http://jsfiddle.net/91beLce7/4/
Try this Fiddle
*{
margin: 0;
padding: 0;
}
table tr td img{
display: block;
}
You can fix that with line-height: .8em;
Try like this: Demo
* {
margin: 0;
padding: 0;
}
table {
background:red;
height: 300px;
border: 1px solid black;
}
tr {
background:#ccc;
}
img {
background:green;
display: block;
}
I got this code:
<table>
<tr>
<td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
}
td {
padding: 10px;
background-color: gray;
}
I want to set table to 70% of the total window width which I did. I also want the td to be 50% of the 70% inside the table, the td width should be static.
You can see the problem here
The only reason your code wasn't working is due to the giant single string.
Add the below to cause it to break, and keep the correct width:
td {
background-color: #808080;
padding: 10px;
width: 50%;
max-width: 50%; /* to limit the width to 50% as well */
word-break: break-all; /* cause any string that is too long to be broken so will fit */
}
Here's a fiddle for your reference: http://jsfiddle.net/9ftqy/
Set table-layout:fixed; to table and fix your problem
fiddle http://jsfiddle.net/S37BB/
new css
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
table-layout:fixed;
}
td {
padding: 10px;
background-color: gray;
width:50%;
overflow:hidden;
}
html
<table>
<tr>
<td>PeterPeterPeterPeterPete rPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
There are couple of things you should understand from your code...
TD width should always be fixed to 50% --- however normal tendency is re-size the cell per content which resides in it.
table {
table-layout: fixed;
}
td {
width: 50%;
}
You want to force cell content to wrap within provided space and not to overflow once #1 is completed.
td {
word-wrap: break-word;
}
Here is complete code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Table</title>
<STYLE TYPE="text/css">
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
table-layout: fixed;
}
td {
padding: 10px;
background-color: gray;
width: 50%;
word-wrap: break-word;
}
</STYLE>
</head>
<body>
<table>
<tr>
<td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Hope this helps you.
Ashok
Problem
I have a fixed width table (which it must be) and one of the cells contains text
that is too long to fit within it, so it overflows outside the cell to the right.
I need to have all the table cells' text to be aligned to the right.
I ideally don't want to change any of the markup.
What I'm Looking For
I'm in need of finding someway for the (text in the example) "longlonglong" to overflow to the left over the other previous cells and maintain it's aligned right state.
Code
HTML
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">very longlonglong text</td>
</tr>
</table>
CSS
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Example
http://jsfiddle.net/xareyo/eVkgz/
See http://jsfiddle.net/eVkgz/1/
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">
<div id="container1">
<div id="container2">very longlonglong text</div>
</div>
</td>
</tr>
</table>
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
#container1 {
width: 30px;
position: relative;
}
#container2 {
float: right;
overflow: visible;
text-align: right;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Do you need a variable height of the cells?
If not:
Place a div inside the td and this CSS:
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
position: relative;
}
td div {
position: absolute;
right: 0;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Add word-break: break-all; to yours td style:
td {
word-break: break-all;
text-align: right;
border: 1px solid black;
vertical-align: top;
}