I'm trying to make an entire cell of my table clickable and I've tried just about every solution I found here except whenever my table cell is finally a hyperlink, the text just will not center no matter what I do and I could use some help.
Here's my html:
table {
border-collapse: collapse;
width: 100%;
height: 100%;
text-transform: uppercase;
letter-spacing: 1px;
}
td a {
color: #333;
display: flex;
height: 100%;
width: 100%;
justify-content: center;
}
<table align="center" border="1">
<tr>
<td>home</td>
</tr>
</table>
And here's the CSS for it:
And here's a visual of what it looks like:
Sorry if this is something that's been asked and answered, I just personally couldn't find a solution on here after three days of searching. Thanks to anyone that helps!
No need to use flex here. Just set display:block to your anchor tag and add some padding for spacing.
Stack Snippet
table {
border-collapse: collapse;
width: 100%;
height: 100%;
text-transform: uppercase;
letter-spacing: 1px;
}
td a {
color: #333;
display: block;
padding: 20px;
text-align: center;
}
<table align="center" border="1">
<tr>
<td>home</td>
</tr>
</table>
use align-items: center; in anchor tag
table {
border-collapse: collapse;
width: 100%;
height: 100%;
text-transform: uppercase;
letter-spacing: 1px;
}
td a {
color: #333;
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
<table align="center" border="1">
<tr>
<td>home</td>
</tr>
</table>
table {
border-collapse: collapse;
width: 100%;
height: 100%;
text-transform: uppercase;
letter-spacing: 1px;
}
td a, td a:link, td a:hover {
display:block;
color: #333;
padding:40px;
text-align:center;
justify-content:center;
}
<table align="center" border="1">
<tr>
<td>home</td>
</tr>
</table>
This should work for you. You don't need to break out the flexbox, and you don't need to make the td a width:100% height:100%. If you just set those properties for the table, the td a will stretch.
use this:
td a{text-align: justify;}
Related
I've tried everything from other similar questions and nothing is working but I can't get my th's and td's to fill the table width.
The table takes up 100% width of containing div.
Thead takes up 100%.
Tbody takes up 100%.
Tr's take up 100%.
But the 4 th and td columns will only take up about 50% width.
I've set them to 25% as I always thought 4 x 25% would add up to 100% but apparently not in CSS.
I've tried adding display block in different places and tried loads of other things but nothing works.
This is what i did:
.booktable {
width: 100%;
overflow-y: scroll;
height: 55vh;
display: inline-block;
}
.booktable thead {
width: 100%;
display: inline-block;
}
.booktable tbody {
width: 100%;
display: block;
}
.booktable tr{
width: 100%;
display: block;
}
.booktable th{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
Been trying display inline-blocks, blocks and position absolutes, relatives, table layouts, removing padding... nothing works.
Even doubling widths to 200% or 50% for td.
Didn't want to ask what must be a really simple answer and I have tried as much as I can but had to ask as I've been trying for hours!
Any help much appreciated.
You are overwriting all table specific display modes, so that's what's getting you in trouble try this:
.booktable {
width:100%;
overflow-y: scroll;
height: 55vh;
display: table;
}
.booktable thead {
width: 100%;
}
.booktable tbody {
width: 100%;
}
.booktable tr{
width: 100%;
}
.booktable th{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
You need to set table width to 100% then all th,td will adapt 25% of the total width.
Here is the working example:
.booktable {
width: 100%
}
.booktable th, .booktable td{
width: 25%;
color: grey;
padding: 1vh;
font-size: 2vh;
border-bottom: 1px solid grey;
font-weight: bold;
position: sticky;
top: 0;
background-color: white;
}
.booktable td{
width: 25%;
font-size: 2.5vh;
text-align: center;
padding: 2vh;
color: grey;
}
<table class="booktable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Group</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Cat</td>
<td>Group</td>
<td>Balance</td>
</tr>
</tbody>
</table>
I have this:
and want this (second column using less space):
Is there a way without introducing absolute values or fixed columns? I don't mind any other hacks like wrappers or invisible columns as long as the content sizes dynamically.
HTML
table {
border-collapse: collapse;
height: 100%;
background-color: blue;
white-space: nowrap;
}
.wrapper {
width: 40%;
font-family: avenir;
height: 100vh;
}
td > div {
color: white;
background-color: darkblue;
padding: 5px;
display: inline-block;
}
td {
padding: 0px;
border: 1px dotted white;
}
.w1px {
width: 1px;
}
.h-100 {
height: 100%;
}
<div class="wrapper">
<table>
<tr>
<td class="w1px"><div>Item1</div></td>
<td><div>Item2</div></td>
<td><div>Item3</div></td>
</tr>
<tr>
<td colspan="3"><div>Item Spanning All Three Above</div></td>
</tr>
<tr>
<td colspan="2"><div>Item Spanning Two</div></td>
</tr>
<tr class="h-100">
</tr>
</table>
</div>
To format these 2 tables I have a css sheet. The top table is a filter/sort selection. The second is a scrollable data table.
div#scrollTableContainer {
width: auto;
margin: 20px; /* just for presentation purposes */
border: 1px solid black;
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tBodyContainer {
height: 750px;
overflow-y: scroll;
}
td:first-child {
min-width: 5%; /* EDIT */
max-width: 5%;
border-left:0;
}
td:first-child + td {
min-width: 4%;
max-width: 4%;
}
td:first-child + td + td {
min-width: 4%;
max-width: 4%;
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor="<%=bgc0%>">USED</th>
<th bgcolor="<%=bgc0%>">STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table border="1" align="center" id="tBody" class="TableData">
<td> stuff </td>
<td> More stuff </td>
</table>
</div>
</div>
Neither of the 2 tables are aligning column wise so that the Title/Header columns do not match the tables columns below. It also shows almost the same in chrome/IE, but firefox is a complete shamble.
Im at a loss to get this right guys, any help will be appreciated.
div#scrollTableContainer {
width: auto;
margin: 20px;
/* just for presentation purposes */
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tBodyContainer {
height: 750px;
}
th:first-child, td:first-child {
min-width: 15%;
max-width: 15%;
width: 15%;
}
td:first-child+td {
min-width: 4%;
max-width: 4%;
}
td:first-child+td+td {
min-width: 4%;
max-width: 4%;
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th bgcolor="<%=bgc0%>">USED</th>
<th bgcolor="<%=bgc0%>">STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table border="1" align="center" width="100%" cellpadding="0" cellspacing="0">
<td> stuff </td>
<td> More stuff </td>
</table>
</div>
</div>
You want to align the columns of both table vertically right?
If that is so, I have a solution for you
I have changed your css and u missed tr in second table.
https://jsfiddle.net/9ccwkoav/
div#scrollTableContainer {
width: auto;
margin: 20px; /* just for presentation purposes */
border: 1px solid black;
}
#tHeadContainer {
background: #CC3600;
color: black;
font-weight: bold;
}
#tHeadContainer th{
width:50%;
}
#tBodyContainer {
height: 750px;
overflow-y: auto;
}
.TableData{
width:100%;
}
.TableData td{
width:50%;
}
This should do the trick. Notice that there will be a little margin because of the scroll bar of the second table, but you can easily change it by adding a tab in the first array with the width of the scrollbar. Hope it will help
#scrollTableContainer {
width : 96%;
margin : auto;
border : 1px solid #ccc;
}
#tHeadContainer {
background-color : green;
width : 100%;
}
#tBodyContainer {
width : 100%;
height : 750px;
overflow-y : scroll;
}
#tHeadContainer table, #tBodyContainer table {
border-collapse : collapse;
width : 100%;
}
td, th {
border : 1px solid black;
}
tr {
width : 100%;
}
th:first-child, td:first-child {
min-width : 15%;
max-width : 15%;
width : 15%; /* Tweak this value to change the first column width */
}
<div id="scrollTableContainer">
<div id="tHeadContainer">
<table>
<tr>
<th>USED</th>
<th>STATUS</th>
</tr>
</table>
</div>
<div id="tBodyContainer">
<table>
<tr>
<td>Stuff</td>
<td>Some other stuff</td>
</tr>
</table>
</div>
</div>
I am currently coding an accessibility page, but I am visually impaired. I've been advised that the table on this page:
http://www.accessibilityagent.com/legal/
is overlapping the adjacent content. Below is the CSS code being used. Could someone please help adjust this code to not overlap the page in the link above:
<div>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}
table.center {
margin-left:auto;
margin-right:auto;
}
body {
text-align:center;
}
table {
width: 50%;
}
table, th, td {
border: 20px solid black;
margin: auto;
padding: 5px;
}
td.wrappable,
table.data_table td.wrappable {
white-space: normal;
}
</style>
Try setting this CSS for the table:
table-layout: fixed;
width: 100%;
word-wrap: break-word;
you need to fit the table, so set table-layout:fixed , now you need to have it fit as large as possible so change width to 100% in table, then you need to fit the links in the cell, so break the words, using word-wrap:break-word in .center a
body {
background-color: #d8da3d;
color: purple;
}
table.center {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 100%;
}
table,
th,
td {
border: 20px solid black;
padding: 5px;
}
.center a {
display: block;
word-wrap: break-word;
}
<table class="center">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Plaintiff</th>
<th scope="col">Defendant</th>
<th scope="col">Link to More Info</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">2015</td>
<td>US DOJ</td>
<td>YAKIMA COUNTY</td>
<td>http://www.ada.gov/yakima…
</td>
</tr>
</tbody>
</table>
SOLVED.
This is an example:
HTML:
<table>
<tbody>
<tr style="height: 100%;">
<td class="lefttd">
<img src="http://www.numbeo.com/images/Menu1.svg">
</td>
<td></td>
<td class="righttd"><img src="http://www.online-utility.org/icons/gear_64.png" style="margin-right: 0.5em;">Online-Utility.org </td>
</tr>
</tbody>
</table>
CSS:
table {
border-bottom: 1px solid black;
border-spacing: 0;
background-color: #bcf;
width: 100%;
}
table > tr, table > tr > td {
padding: 0;
margin: 0;
border: 0;
border-spacing: 0;
}
.lefttd {
height: 100%;
vertical-align: middle;
}
.righttd {
width: 95%;
height: 32px;
text-align: right;
font-size: 22px;
line-height: 30px;
vertical-align: middle;
}
a.mmenu {
border: 0;
text-decoration: none;
background-color: #aaa;
height: 100%;
vertical-align: middle;
display: inline-block;
}
img {
width: 32px;
border: 0;
text-decoration: none;
vertical-align: middle;
}
https://jsfiddle.net/adamovic/sw6c3z91/
In Chrome I see this table computed with height 35px... What causes this table to grow height more than 32px and how to fix it?
Add vertical-align: middle; to your image
<img src="http://www.online-utility.org/icons/gear_64.png" style="width: 32px; margin-right: 0.5em; vertical-align: middle;">
Also, you shouldn't be inlining styles like this. It's a terrible practice. Uses classes and stylesheets instead.
Edit: you can try a few other values too. It looks like vertical-align:bottom might work even better. It appears with the font size and line height that that will get you closer to 32px. With middle it's at about 33px
The problem is solved. I haven't properly marked to img vertical-align: middle and also padding: 0 to tr/td.