I'm currently working on a table that has a different link for each row. The-clicking-area must fill the whole table-row.
And please: No Javascript! And if possible no additional Div-elements.
This is what I got so far:
http://jsfiddle.net/WLYW3/
this works pretty good, but there are some problems:
After adding height: 128px; to the a-elements (which seemed necessary), the text in each row wasn't vertically centered anymore. Adding vertical-align: middle; didn't help.
And I can't get the table to have rounded corners. (border-radius: 6px 6px 6px 6px;).
To fix it, simply add this :
#itemTable tbody tr td a
{
line-height: 128px;
}
Vertical alignment
Because you use the <table> elements, you can just make the anchor 100% height. Combined with vertical-align: middle;, which is used on the <tbody> by default, it will calculate the middle based on the total height (100%):
#itemTable tbody tr td a {
display: block;
position: relative;
/*height: 128px;*/
height: 100%;
text-decoration: none;
color: rgb(51, 51, 51);
}
Table radius
A table without a border actually does not support the border-radius property and there is no clean solution, you can only force it.
However, even though you did not want an extra element, a wrapper would be the most clean solution:
#tableWrapper
{
border-radius: 5px;
overflow: hidden;
}
jsFiddle
Related
I'm struggling to set an EXACT height on a html table-row.
The left column are two divs of height 44px each, and the right column is the table. The height of each row is set to 44px but rows are displayed as 44.44px in height on Google Chrome web inspection tool.
SASS:
table {
width: 100%;
border: none;
tr {
height: 44px;
cursor: pointer;
td {
padding: 0 16px;
border-bottom: 1px solid $bg-light;
vertical-align: middle;
}
}
}
I'm also using Eric Meyers css-reset, although the problem remains with or without it.
Any clues on where the extra .44px comes from?
EDIT
Problem seems to be specific to Google Chrome. Safari renders the correct height.
Possible duplicate of Eliminate gap between tbody tags
but, this is a border-collapse, border-spacing issue with your table next to your div. By default tables have that annoying extra space there. Also make sure that your td's and divs are display inline-block/block or flex if you want to align items in the center.
here's some code and a link for how to resolve it.
table {
border-spacing: 0;
border-collapse: collapse;
}
https://codepen.io/calebswank11/pen/rJvBWK
I have a table in which I would like the borders to collapse and all the cells to touch. I feel like I may be missing something obvious, but the bottom borders are not showing at all despite having height assigned to them. They instead just separate the cells from one another allowing the background color to show through (red in the example).
If I change the border-collapse to separate the borders re-appear, but the gaps remain as well as adding gaps between the columns as well.
JSfiddle
You are not targeting the Table Row, see fiddle: https://jsfiddle.net/32o87x7L/3/
.defaultTable tr{border-bottom: 2px solid blue;}
.defaultTable th,
.defaultTable td {
position: relative;
display: table-cell;
vertical-align: top;
padding: 9px 16px;
font-size: 14px;
line-height: 20px;
background: #eee;
border: none;
//border-bottom: 2px solid blue;
box-sizing: border-box;
}
As is usually the case, I solved my own problem right after submitting my question. :-/
Apparently table-cells do not take too well to positioning as they cannot be consistently. Removing position: relative; from the .defaultTable th, .defaultTable td did the trick.
I have a table:
table.tablesorter {
border: 1px solid #D9D9D9;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #04659D;
border-bottom: 1px solid #0F5E76;
border-left: 1px solid #0F5E76;
font-weight: bold;
text-align:left;
padding: 5px 19px 5px 9px;
color: #fff;
}
Some of the text in the table is too big and is being cut from the page, I have try using word-wrap:break-word; and setting width but nothing its working the text still overflows?
Any tips on how i can fix this?
Give your table element a fixed table-layout:
table.tablesorter {
...
table-layout: fixed;
}
From the CSS2.1 specification (linked above):
17.5.2.1 Fixed table layout
With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.
What is the markup of your table? Perhaps your table's width isn't wide or tall enough to compensate for the auto-adjusting nature of the table cell.
You may want to give this a try: I added the word inside a div and gave it a fixed width plus the word wrap, and it worked for me:
<div id="test">#DecimalFormat(total/counter)#</div>
#test {
word-wrap:break-word;
width:40px;
}
Here is your updated jsfiddle
EDITED: While my suggestion works perfectly in the above demo, if it doesn't work in your specific case, you may need to do some cleanup of your code and maybe use !important as a workaround (ie. word-wrap:break-word !important; width:40px !important;), or try adding display:block - that might help too.
You could add a scrollbar to the cells that have too long words.
just add the following:
table.tablesorter tbody td {
max-width: 250px;// you can use any width you like, the scrollbar will show up only when a cell exceeds the max-width.
overflow-x: auto;
}
another option would be to use white-space: normal, see: http://www.w3schools.com/cssref/pr_text_white-space.asp
for example
table.tablesorter tbody td {
white-space: normal;
}
If this does not work to wrap your text inside a cell, you should check your source and see if there is anything that overwrites your css and fix it.
DEMO LINK
I am trying to include a tooltip inside the table but when mouse hovers it streches the tables and tooltip text isn't showing up correctly as well on the website.
How can I fix this?
CSS:
.infotext {
background: url(http://s17.postimg.org/k71a0r6m3/info_Icon.png) 0 0px no-repeat;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: text-bottom;
}
If you add the following CSS, it should work
td .tooltip {
position:absolute
}
http://jsfiddle.net/z33j5/2/
Without this, the tooltips had a position:relative which meant they were rendered in the table cell
I am trying to create a table with a link (an anchor tag) taking the full height of the table cell (td) that contains it.
This works in Firefox:
table tr,
table td {
height: 100%;
}
table td > a {
display: block;
height: 100%;
}
http://jsfiddle.net/6nem4/
With a couple of minor edits it also starts to work in Chrome, Safari, etc:
table tr,
table td {
height: 100%;
}
table td > a {
display: inline-block;
height: 100%;
width: 100%;
}
http://jsfiddle.net/sj3ST/
I’m just curious if there is a way of making it also work in IE10.
Not the best idea: http://jsfiddle.net/sj3ST/1/
But add padding in IE to anchor tag
a{
padding: 56px 0;
}
Or give padding to span
If you want the link to appear in the top of the td add vertical-align: top; to your td.link and also the background color you want to the td and not the link itself.
If you want the link to appear in the middlw just remove the vertical-align property from my example.
OR
You can use add padding-top: 50%; padding-bottom: 50%; to the a
OR
You can just use a div instead of a element and set onClick event.
example