What I'm trying to do
I'm trying to implement a table header with a border and drop shadow, and have it include padding on the table head.
What I've tried
I gave the div that wraps the table a padding of .75em and when I added a drop-shadow and border to the thead, it did not go around the padding (expected). It did produce the effect I was going for, just there is still padding around the thead that I would like to be included with this effect.
Next I tried moving the .75em padding to the thead and tbody, but it is not working as intended. Inspecting says padding has no effect on internal table elements except cells.
Next I tried to wrap the content inside the thead in a div and give that a padding of .75em, but that did not work.
Next I tried to wrap the content outside the thead in a div and give that a padding of .75em, but that did not work either.
My DOM looks like this
<div class='spreadsheet'>
<table class='data'>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
What I'm trying to achieve:
Not sure to understand what you want, but is it working for you?
.spreadsheet{
background:lightblue;
padding:0.75em;
}
table {
border-radius: 5px;
box-shadow: 2px 2px 5px lightgray;
border-spacing: 0;
background:white;
}
th {
padding: 20px;
}
thead {
border-radius: 5px;
box-shadow: 2px 2px 5px lightgray;
}
tbody {
margin-top: 50px;
padding-top: 20px;
}
As a temporary solution I've added blank rows and columns to each side and gave them a height and width respectively of the padding size. This causes problems with hovering and makes things more complicated than they probably need to be.
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.
Example: http://jsfiddle.net/WaJy7/
I'm trying to add a semi-transparent bottom border to each of my <tr> tags, but the border color is darker than it should be for all but the bottom row and I can't figure out why.
Can you explain why this happens and how to fix it?
I'm not interested in solutions that involve using non-transparent colors.
It appears to be a rendering bug with border-collapse. Tables are fun!
Anyway, I removed border-collapse: collapse and moved your border styles to the table cells themselves. It's happier now.
http://jsfiddle.net/WaJy7/2/
table{
border-spacing: 0; // Equivalent of cell-spacing: 0 on table
width: 300px;
margin: 30px;
}
table tbody td{
border-bottom: 10px solid rgba(0,0,0,0.5);
}
table tbody tr td{
text-align: center;
padding: 15px;
}
I want to create an HTML table where each cell is clickable, and clicking on a cell adds a border to the single div within the cell. I want that div's border to exist entirely within the existing confines of the td that contains it, without resizing the table or its cells at all. I can't seem to make this happen correctly.
This previous question seems to address the same issue and points to some articles about the box-sizing CSS options. I have a fiddle where I tried to implement this without success: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
Here's what currently happens. The border causes the containing td to grow to accommodate the div's border.
How can I add the border to the div without it affecting the containing table?
Look at my JSFiddle.
You need to provide a width/height to your cells:
td {
// ...
width:33.3%;
height:33.3%;
}
How about using an inset box-shadow?
.selected {
box-shadow: inset 0px 0px 0px 2px red;
}
OK, since I've seen a some support for my response in the comments, here it as an answer :)
Presize your cell by adding a yellow 'hidden' border to the .unselected state:
CSS
.unselected {
background-color: yellow;
border: 2px solid yellow; // Presize with this yellow border
}
div {
..
line-height: 1; // Add line-height to regulate size (optional)
}
Codepen example.
Using table-layout to fix the width of cells and small padding in selected to prevent increasing height.
table {
table-layout: fixed;
}
.selected {
padding: 1px;
}
See JSFiddle