I am making a simple table to display information and wanted a border at the bottom of each row. I collapsed the borders to remove the space between the rows as to avoid the doubling of borders. And it works fine but when I adjust the screen size sometimes the border seems to break or buckle where it gets displaced slightly. I'm attaching an image of the phenomenon.
Here is the whole table as well:
And here is my CSS:
table{
border-collapse: collapse;
}
tbody{
width: 100% !important;
}
th{
width: 8%;
padding-left: 4%;
font-size: 1.5vw;
padding-top: 2%;
}
td{
width: 20%;
font-size: 1.5vw;
padding-top: 2%;
}
td ul {
width: 90%;
}
td ul li {
padding-top: 10%;
text-align: center;
padding-bottom: 10%;
}
tr{
border-bottom: solid 1px black !important;
}
Is there any way around this? Or is it more a matter of my content?
Your table row borders work only as a side-effect of conflict-resolution in the border-collapse algorithm. A table row is not meant to have borders, but since the style is applied, and borders are collapsed, the browser attempts to resolve any potentially conflicting styles by applying border styles of the parent to the respective cells it houses.
What's actually being rendered is a series of cells of slightly varying height, each with its own bottom border resolved from the value taken from the parent tr element.
One alternative might be to wrap the first row with a thead element and each successive row with a tbody element, and then set them to display: block with border-bottom.
You can work out some different solutions, but the main issue here is just a misunderstanding of how borders work on table elements, and the W3C link should help to sort that out.
At small sizes this table becomes impossible to read, so I'd also recommend that you read Richard Rutter on designing tables to be read, and also avoid using percentage and viewport-based units for font-size and padding.
Related
I have looked around alot but i cant figure out what is going on here.
So i have a table with 2 td's on the first row.
left td has a image and should be h:200px and w:200px.
right td has some text and should be h:200px and w:430px.
So the total should be w:630px and h:200px but somehow if i inspect the tr its h:200px and w:630.4px so 0.4 too many which i cant figure out where its from.
i have the margin and padding set to 0px.
#logo {
height: 200px;
width: 200px;
display: inline-block;
}
#headerText {
height: 200px;
width: 430px;
background-color: #660066;
display: inline-block;
}
picture with inspecter: https://imgur.com/d4nVbq9
You need to add both your HTML and CSS codes so that we can see the result and inspect it. But from your explanation, I would say there are two things to consider:
If you want to control the size of a cell, you need to wrap the content in a div or other block elements.
Try adding overflow: hidden; and white-space: nowrap;to your table cell. Use either one that works for you.
So I have an HTML Table that is acting as a summary table for a list of things I need to display. I have only 4 columns showing but there are approx. 20 and they're currently set to display: none;. The problem is those hidden cells are causing rows to be larger than the visible ones need. (I Would just delete the hidden ones but later functionality dictates that user's will need to be able to make those cells/columns visible)
Question: Is there a way to make the row's height as tall as the visible ones need (and nothing more) and adjust as cells/columns visibility change?
Current CSS:
table.grid {
border-collapse: collapse;
}
table.grid tr td {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
white-space: nowrap;
vertical-align: top;
}
table.grid tr td input {
display: block;
}
With this I've successfully eliminated the horizontal white-space between cells but I need to eliminate the vertical space now and I'm not sure how to overcome this little hiccup.
Try this on your hidden cells.
.class{
display:none;
line-height:0;
}
I'm using a table layout for data representation:
The problem is that according to the design, i must put these separation borders between the cells.
I saw no way of accomplishing this, other than through the use of div elements within the td elements (which - correct me if i'm mistaken - shouldn't pose a problem).
Example
<table>
<tr>
<td>
<div class="inner">
Content
</div>
</td>
</tr>
</table>
CSS
table td {
padding: 15px 10px;
border-bottom: 1px solid #e5e5e5;
}
table td div.inner {
padding: 10px 25px 10px 0;
border-right: 1px solid #e5e5e5;
}
It works fairly well - what you see in the shot is the actual rendering in the browser.
But when you take a close look, you'll notice that the vertical lines (the border-right property of div.inner have varying heights. This, of course, makes sense and i understand why it happens. The content within div.inner will cause it to grow in height, adding the padding.
I tried setting a fixed height to div.inner which would be ok for my table, because i know exactly how much data i will represent and that it will never exceed a certain height. But when doing this, all content within div.inner becomes vertically aligned to the top, meaning that the naturally applied vertical-align property of my td elements is no longer affecting the content inside div.inner.
I tried applying display: inline-block to div.inner to trigger vertical centered alignment, which then caused the widths to vary. So i added width: 100% as well, which then resulted in misalignments on the horizontal axis (text overlapped borders) and finally didn't show the desired result regarding the vertical alignment. So this approach is fruitless.
How could i make those vertical separator lines be of equal height?
Or, alternatively, ...
How could i force vertical alignment of all content, when using a fixed height on div.inner?
Please note: Using line-height in any way to achieve the result (or attempt to) is not an option for me. As you can see in the screenshot, i am displaying a progress bar. This incorporates further elements within div.inner.
I do not know what kind of browsers do you have to support for, but my solution requires browser support for the :before or :after pseudo elements, as well as support for the :last-child (or any CSS3) selectors.
Currently the global stats points to:
84.9% total support + 7.56% partial support for CSS generated content. Source
84.79% support for CSS3 selectors. Source
Therefore it is important that perfect cross-browser compatibility is impossible to be achieved, especially when considering antiquated browsers, but it only affects the layout, not the functionality of your site ;)
My solution is to set the position of each table cell to relative, and then add a pseudo-element that has a right border of 1px in width that is positioned absolutely within each cell:
table td {
padding: 15px 10px;
position: relative;
border-bottom: 1px solid #e5e5e5;
}
table td:before {
border-right: 1px solid #e5e5e5;
content: ""; /* Need to declare content, even when empty! */
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
width: 0;
}
/* Optional, only if you want to */
/* remove border on last td element on each row */
table td:last-child:before {
display: none;
}
See working fiddle here (tested in Chrome, Safari and Firefox): http://jsfiddle.net/teddyrised/e4LXY/
The merits of this method is that it is widely supported in most modern browsers, and that since the :before pseudo element is added to the table cell instead of the inner div, it will stretch with the final computed height of the row, therefore ensuring that they will be of all equal height. The fiddle demonstrates that the content can be of variable height.
The only demerit is that there is no backward compatibility for browsers that do not support CSS generated content and/or CSS3 selectors. You might want to consider using a fallback style (like, a solid border for the entire table) for visitors on older browsers.
I had similar problem with menu, this is the CSS magic with which I solved it:
HTML:
<table>
<tr>
<td>
<div class="inner">
Content
</div>
</td>
<td>
<div class="inner">
<span style="font-size:40px;">AAAA</span>
</div>
</td>
<td>
<div class="inner">
<span style="font-size:8px;">asd</span>
</div>
</td>
</tr>
</table>
CSS:
table td {
padding: 15px 10px;
border-bottom: 1px solid #e5e5e5;
}
table td div.inner {
padding: 10px 25px 10px 0;
position: relative;
}
table td div.inner:after {
position: absolute;
top: 50%;
margin-top: -20px;
margin-bottom: -20px;
margin-left: 23px;
height:40px;
width: 1px;
content: "";
background-color: #e5e5e5;
}
jsfiddle: http://jsfiddle.net/xJj2y/
I think setting a fixed height on the div and doing a vertical align middle on the td will fix it. Post a fiddle with some dummy rows and that can help.
Here is my code: http://jsfiddle.net/8z4aw/
I want to have a bunch of div's that are behaving like a table. As you can see, I have specified explicitly their widths, but the browser is completely ignoring it and doing what it wants. Also, it appears that those div's are having a right margin, that is not specified anywhere. So where does it come from? How to fix those two problems?
Ignore code below, pasting it only so that post will go through
.standardTable {
color: #fff;
}
You have a couple options:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
My preferred is to set the font-size of the parent element to 0 and set the font-size on the children manually:
http://jsfiddle.net/8z4aw/9/
This is what I changed in the CSS:
.standardTable {
font-size: 0;
}
.standardTable .td,
.standardTable .th,
.standardTable .tr {
font-size: 18px;
}
Well the widths aren't behaving because you have two different sets of padding on them, due to the "th" and "td" classes.
So, anything with the classes "th integer" is going to have a width of 181px and a padding of 10px. This adds up to a total width of 201px
However, anything with the classes "td integer" has a width of 181px and a padding of 20px, which means they have a total width of 221px
So, due to your padding, those are always going to be 20px different from one another.
The reason you have a "right margin" is because the table with class "standardTable" is actually inheriting it's width from the js fiddle window, which means it is 100%. You need it to be set to a fixed with that adds up to all the cells inside.
You can see the problem here:
<div class="th integer">
Podkategorii
</div>
<div class="td integer">
0
</div>
.standardTable .th {
display: inline-block;
background-color: #2b5797;
padding: 10px;
}
.standardTable .td {
display: inline-block;
background-color: #2d89ef;
padding: 20px;
}
Here's a working fiddle:
http://jsfiddle.net/shayl/8z4aw/13/
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>