I have a table. Its <td> have overflow: auto.
The width is set to be 100px. In Firefox only, text that exceeds 100px is not hidden and replaced with a scrollbar.
How can I hide content and have a scrollbar when it exceeds the width of its container?
http://jsfiddle.net/be6tM/10/
this question from here maybe solve your problem
nickb answer: "Try wrapping it in a <div>. I'm pretty sure the overflow attribute is not defined for a <td> element, at least in HTML4 it's not."
try to put your overflow:auto to the wrapper hope this can help you
pre, div {
width:100%;
overflow: auto !important;
}
working demo
The easier way to do this would be to add this to the Html
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
and this to the CSS
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
Working Example:
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
<table>
<tr>
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
</tr>
</table>
Related
I have a very large table that doesn't fit a page and I added horizontal scrollbar like this:
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
}
And <table class="table-x-scroll">...</table>
But I also want my table to be in the center of a page. I used to use align="center" but now, when I added display: block it doesn't work. Table is always at the left. How can I do these two things at the same time?
Would be better to use a wrapper for the table and add overflow to that wrapper not the table it self. This way you can control the behavior better.
And also use margin:0 auto on table to center it horizontally. No need for display:block
See below or better in jsFIddle
table {
border: 2px solid red;
width: 300px;
margin: 0 auto;
}
td {
border: 1px solid red;
}
.wrapper {
width: 100%;
overflow-x: auto;
}
<div class="wrapper">
<table>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
Try to add margin-left:auto; margin-right:auto; in your style and specify the width
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
margin-left:auto;
margin-right:auto;
width:50%;
}
<table class="table-x-scroll" border="1">
<tbody>
<row>
<td>AA</td>
<td>BB</td>
</row>
</tbody>
</table>
Try adding Margin : 0 auto
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
margin : 0 auto
}
I can see that others have answered the aligning problem. But i couldn't see the "Doesn't fit to page" error so here is a solution for that:
In the css you specified overflow-x: auto;
If you change that to overflow-x scroll; it will make it scale to whatever size you choose to specify. and make it scrollable. The scrollbar within is possible to edit/remove, but it will still scroll ^^
I personally recommend the vw,vh values
example:
.bunnydiv {font-size: 1vw, 1vh;} This will make it scale to 1% of the width and of the height of the monitor. This can be specified with either vh, vw, vh and vw. Not both paramaters are needed, and it will scale accordingly :-)
I found some code I made myself some time ago, use this as a reference :-)
.div_scroll
{overflow-y: scroll;
display: block;
top:0px;
right: 0px;
position: absolute;
transform: translate(-23.6vw, 15vh);
border: 3px solid #dddddd;
max-height: 75vh;
width: 76vw;
margin: 0px;
background-color: white;}
It's copy-pasted, and setup this way for readability. Don't format you code like this unless it works better for you :-)
I'm trying to set the maximum width of a table, but it doesn't seem to be working. If a word inside the table is too long, it automatically expands the width of the table. How do I stop that from happening, and instead have the word that's too long go to the next line?
<style>table {
max-width: 300px;
}
table,
td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</div>
</td>
</tr>
</table>
If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width, not max-width.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Add the following rule your css section.
div{
overflow-wrap: break-word;
max-width: 300px;
word-wrap: break-word; will work if you have width assigned to the container, you are applying this property to. Thus, you will have to assign width:100px; or desired width to div tag.
<style type="text/css">
div {
width: 100px; /* this will limit the length of the word to 100px */
border: 1px solid blue;
word-wrap: break-word;
}
</style>
Putting max-width inside the div solves the problem.
<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>
</table>
THIS IS THE FIDDLE
HTML:
<input id="APP" type="button" value="Append"/>
<div id="wrapper">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%; height: 30px; background-color: rgb(230,230,230)">
</td>
</tr>
<tr>
<td style="height: 100%;" align="center">
<div id="ContentWrapper">
</div>
</td>
</tr>
</table>
</div>
CSS:
#wrapper{
width: 80%;
height: 300px;
background-color: rgb(25,25,25);
}
#wrapper table{
width: 100%;
height: 100%;
}
#wrapper table td{
vertical-align: middle;
}
#ContentWrapper{
width: 98%;
height: 95%;
border: 1px solid blue;
color: rgb(255,255,255);
text-align: left;
overflow-y: auto;
}
jQuery:
$("#APP").on("click",function(){
$("#ContentWrapper").append("Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>");
});
If you test this in Chrome or any other browser you'll see that it works as it should. But in Firefox, if you keep pressing the "Append" button, the div's height will change with the content despite of the fact that the div's overflow is set to auto.
I know this would work if I would set the div's dimensions in px instead of percentage, but I don't want to do that. I made that fiddle as an example to pinpoint the issue but in my original code the wrapper that holds the table is responsive and I have to keep the dimensions in percentage.
Interesting find. It smacks of a bug in Firefox.
However, there is a workaround: assign an explicit height to the tbody in the table as well.
#wrapper table, #wrapper tbody {
width: 100%; height:100%;
}
See updated fiddle. Note that I also changed some other properties, because the browsers got confused by the top td being 30px high and the bottom one 100%. I changed that to 10% and 90%; you may have to use other values in your situation. (Maybe use calc(...) for one of them.)
I know there are a lot of answers out there about this problem. But I can't seem to get it. Here is my example:
http://jsfiddle.net/xyJkc/2/
see the first div does not fill the total height of the td. I want the divs in each td to fill up the complete height no matter how much, or how little, text is in each one.
I guess the unclear thing is that the height of each row is not explicitly defined, but it is defined by the maximum height of the content of the cells.
Thanks the help!
here's the code:
html:
<table>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>many lines of text. More and more.</div>
</td>
</tr>
</table>
css:
table {
width:100px
}
td {
border: 1px solid grey;
height: 100%;
}
div {
height: 100%;
border: 1px solid;
}
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
can you add display:inline-table;
div{
height: 100%;
display:inline-table;
border: 1px solid;
}
http://jsfiddle.net/xyJkc/13/
You can set a height on the table or tr. Then the div will fill the whole td.
Example:
tr{
height: 5em; /* or px */
}
I think it's because your div has position value set to static (by default). You can fix it by giving position:absolute; property to the tr or if you don't want to do this you can use jQuery:
$(function()
{
$('div').height($('tr').height());
});
I have a table cell with an anchor tag and I want the width (and height) of the anchor tag to fill the width of the containing table cell. Intuition doesn't seem to work on this. Please help.
HTML:
<table>
<tr>
<td class="width_is_100px">
<span class="make_width_100px">Some Text</span>
</td>
</tr>
</table>
CSS: (doesn't work)
.make_width_100px {
width:100px !important;
}
The anchor tag is only as wide as the text "Some Text". I want the user to be able to click anywhere inside the table cell and trigger the link. No javascript please.
Try it:
a {
display: block;
height: 100%;
width: 100%;
}
Make your <a> element a block element (it's inline by default):
.width_is_100px a {
display:block;
}
None of these answers work properly to fill the width and height when the text wraps.
The only answer I found that produces a proper result filling the height and width of the cell right to the edges is this one:
td {
overflow: hidden;
}
td > a {
display: block;
margin: -10em;
padding: 10em;
}
<table>
<tr>
<td class="width_is_100px">
<div style="width:100%;">Some Text</div>
</td>
</tr>
</table>
this is probably too late but, this worked for me in tables with different content height.
html
<table class="example">
<tr>
<td>small content</td>
<td>multiline<br>content</td>
<tr>
</table>
css
table{
padding:10px; /*for example*/
}
table.example td{
overflow:hidden;
padding:0px; /*you can need !important*/
}
table.example a{
display: block;
height: 100%;
width: 100%;
padding: 10px 10px 500px 10px; /*table default padding except on bottom 500px for example*/
margin-bottom: -490px; /*same as bottom padding - table padding*/
}