Using only HTML and CSS,
I wish to have a table like the following:
Header1 Header2
-------------- --------------------
L1Col1 content L1Col2 wider content
L2Col1 datum L2Col2 datum2
Where the underline automatically sizes to the
table column width.
Help!
Try this:
CSS:
.sample-table {
width: 50%;
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 1px dashed #000;
}
.sample-table td,
.sample-table th {
padding: 3px;
}
HTML:
<table class="sample-table">
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>L1Col1 content</td>
<td>L1Col2 wider content</td>
</tr>
<tr>
<td>L2Col1 datum</td>
<td>L2Col2 datum2</td>
</tr>
</table>
Azu,
Thanks for your answer.
The "border-spacing" usage was completely enlightening to me.
I modified the CSS to the following:
.sample-table {
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 2px solid #000;
}
.sample-table td,
.sample-table th {
padding: 3px 0px;
}
This gives me exactly what I wanted.
Related
My table cell has fixed width and contains select list and one or two buttons in a row. Select should fill all the space before buttons. I solved this with div wrapper, but my boss doesn't allow me to use any additional divs because from his point of view each element must symbolize some program data. He alsow doesn't allow me to use flexboxes.
Here's the code of how it should look like
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
#wrap {
overflow:hidden;
}
<table>
<tr>
<td>
<button>+</button>
<div id="wrap">
<select>
<option value>ttttttttt</option>
</select>
</div>
</td>
</tr>
</table>
Is there a way I can do this without additional elements or non-cross-browser solutions like flexboxes?
Try this option with help of inner table and without any additional wrappers. https://jsfiddle.net/xkLaq47m/
/---CSS---/
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
.inner-table{
margin: 0;
}
.inner-table__button-cell{
min-width: 15px;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
/*---HTML---*/
<table>
<tbody>
<tr>
<td>
<table class="inner-table">
<tbody><tr>
<td>
<select>
<option value="">ttttttttt</option>
</select>
</td>
<td class="inner-table__button-cell">
<button>+</button>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
I am encountering an issue in IE9,10,11 where an ::after pseudo element will not fill 100% of the height of it's td parent.
If the first column in the second row had two lines of text, the pseudo element would fill the full height with no problem. So, I figured that the issue was happening because the td was not filling the height of the tr but that isn't the case.
The first screenshot is Chrome and the second is IE9
HTML
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
CSS
table td {
border-bottom: 1px solid;
}
table td:first-child {
position: relative;
}
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 100%;
display: block;
background-color: orange;
}
Codepen: http://codepen.io/cbier/full/BjpaqB/
P.S. I am using an ::after pseudo-element instead of borders for a special reason and it is a requirement
Thanks!
May be using a single pseudo element for the whole table ?
table {
overflow: hidden;
}
table td {
border-bottom: 1px solid;
}
table tr:first-child td:first-child {
position: relative;
}
table tr:first-child td:first-child:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 1000px;
display: block;
background-color: orange;
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
An alternate way, with background : linear-gradient
table td {
border-bottom: 1px solid;
}
table td:first-child {
background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
You can use following code for it:
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 45px;
display: block;
background-color: orange;
}
it is giving same output in chromeas well as IE 9
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 have a table with a fixed height and a variable number of tbody elements.
table {
border:1px solid black;
height:300px;
}
By default the page increases the height of the first tbody to fill the total height of the table (demo: http://jsfiddle.net/hvdcz8qr/). How can I have all the tbody elements stacked at the top of the table, and keep the extra height below the tbody elements?
Using elements other than table and tbody is not an option in my case.
[Update] I have added a second column to my example: http://jsfiddle.net/hvdcz8qr/10/
You can set the display of the tbody to block
table tbody {
display: block
}
Edit
Inorder to make the td use all the space:
table tbody tr {
display: flex;
}
td {
border:1px solid red;
display: block;
width: 100%;
}
New JSFiddle
After your comment in my suggestion try this:
table {
border: 1px solid black;
height: 300px;
}
td {
border: 1px solid red;
}
tbody {
float: left;
clear: left;
width: 100%;
display: inherit;
}
<table>
<tbody>
<tr>
<td>First tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>second tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>third tbody
</td>
</tr>
</tbody>
</table>
set width: 100% and display: inherit to take the whole table width.
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;
}