I want to use a container to wrap a table so that it can scroll horizontally on mobile screens:
* {
box-sizing: border-box;
}
body {
padding: 10px;
margin: 0px;
}
.table-wrapper {
width: calc(100% + 20px);
overflow: auto;
margin-left: -10px;
margin-right: -10px;
padding: 0 10px;
}
table caption {
text-align: left;
padding: 5px 5px;
background: black;
color: white;
}
table { /* for illustration purposes */
width: 1000px;
border: 1px solid black;
}
<div class="table-wrapper">
<table>
<caption>title of the table</caption>
<thead>
<tr>
<td>Date</td>
<td>Away</td>
<td>Pts</td>
<td>Home</td>
<td>Pts</td>
<td>Match</td>
</tr>
</thead>
</table>
</div>
To make it clear that the table scrolls horizontally, I've used negative margins on the sides of the .table-wrapper so that the table butts up against the right edge of the screen (run the code snippet to see it in action). Then I've padded the sides of the .table-wrapper so that there's a comfortable space again when you've scrolled all the way to the left or right edge of the table.
However, while this padding manifests as desired on the left edge, it doesn't show up on the right edge (because the .table-wrapper is only 100% of the screen width). This seems to be the case across browsers.
Is there a CSS-only fix so that a padding appears on the right edge of the table only when you scroll all the way to the right?
Try this:
body {
margin: 0;
}
.table-wrapper {
overflow: auto;
padding: 0 10px;
}
table {
display: inline-table; /*key*/
width: 1000px;
border: 1px solid black;
}
table caption {
text-align: left;
padding: 5px 5px;
background: black;
color: white;
}
<div class="table-wrapper">
<table>
<caption>title of the table</caption>
<thead>
<tr>
<td>Date</td>
<td>Away</td>
<td>Pts</td>
<td>Home</td>
<td>Pts</td>
<td>Match</td>
</tr>
</thead>
</table>
</div>
Related
I have a table.matrix in a div.matrix-wrapper.
The whole thing shall be centered in a bigger div.
I only achieved this by adding display: table; margin: 0 auto; to the wrapper.
(Adding the auto margin to the table is not an option, because of the gray border.)
On its own, the result looks the way I expect. (left)
But when I place it within a table, It looks like the wrapper has a padding. (middle)
When I remove display: table; from the wrapper, the pseudo padding goes away,
but then the centering does not work anymore. (right)
(External links removed.)
Based on the answer given by Alohci, I added this simplified example:
.green {
width: 80px;
height: 50px;
border: 2px solid #0d0;
}
.red {
display: table;
margin: 0 auto;
border: 2px solid red;
}
.blue {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid yellow;
background-color: blue;
}
table {
border: 3px solid black;
border-spacing: 5px;
margin: 20px 0;
}
table td {
border: 3px solid gray;
color: gray;
padding: 5px;
}
<h2>plain boxes</h2>
<p>The red box wraps directly around the blue box with the yellow border.</p>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
<h2>boxes in table</h2>
<p>The red box inherits border-spacing from the surrounding table.</p>
<table>
<tr>
<td>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
</td>
</tr>
</table>
<h2>plain table</h2>
<table>
<tr>
<td>plain</td>
<td>table</td>
</tr>
</table>
border-spacing and border-collapse inherit. The wrapping table has
border-spacing: 2px;
border-collapse: separate;
applied to it through the user-agent stylesheet, so these values are inherited by your div.matrix-wrapper and have effect when it's given display:table.
To remove the "padding", just set the div.matrix-wrapper to border-spacing: 0px.
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'm trying to give a table a left margin, and set the width of the table plus its margin to 100% of the containing div.
Normally I'd do this with width: 100% and box-style: border-box, but this doesn't seem to be working on a table.
Here's my CSS:
table {
width: 100%;
margin-left: 2em;
border: 1px solid black;
box-sizing: border-box;
display: table; /* tried adding this but doesn't seem to help */
}
You can see the problem here in a JSFiddle: http://jsfiddle.net/7C66d/
I can see it in Chrome, Firefox and Safari.
I think you are confused, you use padding with border-box, not margin.
http://jsfiddle.net/7C66d/4/
HTML
<div id="wrapper">
<table>
<tbody>
<tr><td>why is this table</td><td>not border-box</td></tr>
</tbody>
</table>
</div>
CSS
#wrapper {
width: 100%;
padding-left: 2em;
box-sizing: border-box;
}
table {
width: 100%;
border: 1px solid black;
display: table;
}
If you don't want a wrapper, you can use display:block as it will set the width to 100% by default.
Code:
table {
margin-left: 2em;
border: 1px solid black;
display: block;
}
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;
}