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%;
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>
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 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'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;
}