I'd really love this to work in IE. I'm not able to change the fact that tables should not be used here. IE is the only browser the project I'm working on is required to support.
Here's the code:
<html>
<body>
<style type="text/css">
#test table {
border-collapse: collapse;
table-layout: fixed;
width: 95%;
}
#test table td {
border: 1px solid rgb(0,0,0);
}
#test table div.scrollable {
max-width: 100%;
overflow: auto;
}
#test table table {
table-layout: auto;
width: 100%;
}
</style>
<div id="test">
<table>
<tr>
<td colspan="2">
<div class="scrollable">
<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</ td>
</tr>
</table>
</div>
</td>
</tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
</body>
</html>
I've been using the Tryit Editor to play with this. Thanks in advance for your help!
I'm not exactly sure what you're trying to accomplish, but try this in your CSS:
#test table {
border-collapse: collapse;
table-layout: fixed;
width: 50%;
}
#test table td {
border: 1px solid rgb(0,0,0);
}
#test table div.scrollable {
max-width: 100%;
overflow: auto;
}
#test table table {
table-layout: auto;
width: 100%;
}
.scrollable {
height:40px;
width:100%;
overflow-x:scroll;
overflow-y:none;
}
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>
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>
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
I need to accomplish that my whole TD is a hyperlink.
Other solutions I found on the internet won't seem to work. Like the one shown beneath.
Therefore I want to know if you guys could help me out.
I think the problem might be the fact that this is about a scalable table.
If so, is there another way to accomplish my goal?
<div class="block">
<table>
<tr>
<td>
<a href="http://example.com">
<div style="width: 100%; height: 100%;">
Test
</div>
</a>
</td>
</tr>
<tr>
<td>
Google
</td>
</tr>
<tr>
<td>
Google
</td>
</tr>
<tr>
<td>
Google
</td>
</tr>
</table>
</div>
With this CSS:
<style type="text/css">
.block {
width: 100px;
height: 500px;
background: #008700;
}
.block table {
/*width: 100%;*/
height: 100%;
text-align: center;
border-collapse: collapse;
}
.block table tr:nth-child(odd) {
background: #008200;
}
.block table tr:nth-child(even) {
background: #205527;
}
.block table tr {
}
.block table tr td {
float: left;
}
.block table tr td a {
display: block;
width: 100%;
}
</style>
Add "height:100%" to :
.block table tr td a {
display: block;
width: 100%;
height:100%;
}
Demo Fiddle
Firstly remove float: left; from .block table tr td
Then add height:100%; to .block table tr td a
you need add in block table tr td a height: 100%;