This question already has answers here:
Chrome render bug with border-collapse
(1 answer)
Chrome bug with colspan and border?
(2 answers)
Closed 3 years ago.
What I'm basically doing is to reproduce a pre-formatted table in HTML/CSS. However, it's displayed differently in different browsers.
Firefox and IE shows it as it's intended. Chrome, however, draws a bogus line that's not there even by inspecting the HTML. In the original file, Chromium Embedded (CEF1) has additional differences.
I made a snippet to demonstrate the problem:
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
So the question is: Is there a problem with the above CSS, or anything that should be used in a different way? I doubt such a basic thing could be a Chrome bug. Still, I don't want that line below cell "B".
Browsers have some leverage in how they interpret things, and Chrome can be ...different... and intractable sometimes.
In any case, I don't think you can reset the border color or size (it ignores transparent and 0), but you can override it with a color that will blend into your background. Removing border-collapse may work, but seems like the opposite of what you really want.
As a bonus, putting the border on all sides corrects a jog downward that Chrome was giving 'B' because it lacked a border. (Other browsers didn't do this.)
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: 1px solid white;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
The border-collapse was causing the issue in Chrome. Not sure if needed?
https://jsfiddle.net/mayjr9dL/
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
You just need to remove border-collapse:collapse to remove underline from cell "B".
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
I think this is happening because of your border-collapse property. If you remove it you will see the line vanishes from underneath the B. Sometimes browsers interpret CSS properties differently because there is no set rules. You can try out websites like caniuse to find out the difference in CSS properties or Pleeease, which is a Node.js application that easily processes your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintainability.
Related
I really need some help with CSS.
I'm trying to style a table and I'm having difficulties adding borders.
Here's the table style I'm going for (Photoshopped): https://ibb.co/hFkCkDg
Adding a border around the table is simple:
.table-class {
border: 1px solid #dddddd !important;
padding: 20px !important;
border-radius: 5px;
}
Screenshot: https://ibb.co/Fs6qsNv
To add the separating lines inside the table I need to add a top or bottom border to the rows in the table. Rows are tr elements. By default a tr element of a table does not accept borders. So in order to overcome this I added {border-collapse: collapse !important;} to the whole table which allowed me to add borders to rows, but it messed up the border around the whole table. Screenshot: https://ibb.co/Vgfq9jp
Because of {border-collapse: collapse !important;}, the properties border, padding, border-radius don't work for the table.
Which means I can either add a border around the whole table or add the separating lines, but not both.
How can I achieve the look I'm going for?
I'd go using flexbox, and setting flex: 1 or flex-grow: 1 to the first child of each "row":
* {margin:0; box-sizing: border-box;}
body {font: 16px/1.4 'Varela Round', sans-serif; padding: 20px;} /* DEMO ONLY */
/*
Order
*/
.Order {
border-radius: 5px;
border: 1px solid #ddd;
padding: 10px 25px
}
.Order-price {
display: flex;
border-bottom: 1px solid #ddd;
}
.Order-price > * {
padding: 10px 0;
}
.Order-price > *:first-child{
flex: 1;
}
.Order-price:last-child {
border-bottom: none;
}
.Order-price--sub {
font-size: 1.2em;
font-weight: 500;
}
.Order-price--tot {
font-size: 1.4em;
font-weight: 700;
}
/*
Colors
*/
.color-lighter {
color: #999;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<div class="Order">
<div class="Order-price">
<span class="color-lighter">Custom Tatoo Design - Small × 1</span>
<span><s class="color-lighter">$99.00</s> <b>$80.00</b></span>
</div>
<div class="Order-price Order-price--sub">
<span>Subtotal</span>
<span>$80.00</span>
</div>
<div class="Order-price Order-price--tot">
<span>Total</span>
<span><small>USD</small> $80.00</span>
</div>
</div>
working with table border is boring, my suggestion is to use the border in td/th elements.
I created this table without style, only solving the problem of borders
.table-class {
border: 1px solid #dddddd;
border-radius: 6px;
padding: 30px;
border-spacing: unset;
font-family: sans-serif;
font-size: 1.5em;
}
.table-class thead th {
border-bottom: 1px solid #dddddd;
text-align: left;
}
.table-class tbody td {
border-bottom: 1px solid #dddddd;
}
.table-class td:last-child, .table-class th:last-child {
text-align: right;
}
.table-class th, .table-class td{
padding: 10px;
}
<table class="table-class">
<thead>
<tr>
<th>Custom Tattoo Desing - Small x 1</th>
<th>
<span><s>$99.00</s></span>
<span>$80.00</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtotal</td>
<td>$80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>USD $80.00</td>
</tr>
</tfoot>
</table>
I have a css which works perfectly:
.border
{
border: 1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.clean
{
border: none;
font-size: 14px;
}
No problem. But to create a table with border I will have to do:
<table class="border">
<tr>
<td class="border"></td>
<td class="border"></td>
</tr>
I find this brutally tedious. Isn't there a way to go:
<table class="border">
<tr><td></td><td></td></tr>
with the same result as the above?
I want an "excel-like" square grid, not only a border around the table (second example).
Pls help.
Yes there is:
.border { /* matches all element with that class */
border-collapse: collapse; /* excel like (collapse cells border together) */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.border td { /* matches all td which have "border" in a parent class element */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
`
You don't need to apply the class inside all your tds. Just use like this:
table.border,table.border td{//Applying border in table html
border: 1px solid black;
}
i created the table with empty span tags with padding giving them a box shadow.
its simple html structure is as follow.
<table>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></td></span>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
</table>
with css code as below..
th {
font-size: 20px;
background-color: #cccccc;
padding: 5px 8px;
}
td {
padding: 5px 5px 10px 5px;
font-size: 18px;
background-color: #ececec;
}
th,td {
border-right: 2px solid #dedcdd;
}
table {
margin-top: 25px;
border: 2px solid #dedcdd;
position: relative;
border-collapse: collapse;
}
.tokenHolder {
background-color: white;
cursor: pointer;
position: relative;
color: transparent;
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 2px 2px 2px gray;
border-radius: 2px;
}
the respective js fiddle is at http://jsfiddle.net/Pank/4A9BM/
here in after using border-collapse:collapse at the table removes the box shadow for the span inside it..
otherwise hole code is running fine in all browsers..
Please help for this ie related quirk..
Just add
<!doctype html>
in the top of your HTML document. It will work fine. Tested in IE10
updated answer.
screen shot: When i use
http://www.image-share.com/ijpg-2440-42.html
Screen shot: without using
http://www.image-share.com/ijpg-2440-43.html
http://www.image-share.com/ijpg-2440-44.html
here is the link to it. just read it.
w3schools
I have a table cell with text in it but how can I make the text flush to the top or bottom of the cell (with no padding above it)? I've tried vertical-align, but it's still not quite to the top 'edge'.
My code
<table>
<tr>
<td class="foo">3.2325</td>
<td class="bar">4.5931</td>
</tr>
</table>
table {
border-bottom: 2px solid black;
border-collapse: collapse;
}
table td {
border-top: 1px solid black;
border-collapse: collapse;
background-color: pink;
padding: 0 10px 10px;
}
.foo {
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
}
.bar {
font: normal 16px arial;
}
JSfiddle example: http://jsfiddle.net/KznxN/2/
depending on whether you wish more above or below, you adjust the "line-height" depending
example:
. {foo
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
line-height: 24px;
}
But beware, it would be better fix the height size of your cell
I have a strange Problem with table formating using IE 7.
My table looks like this:
In IE, when using border-collapse, the borders don't get displayed correctly. That's why I used this fix:
.table-vmlist td { border-top: 1px solid black; }
td.col-vm-status, tr.row-details td { border-left: 1px solid black; }
td.col-vm-rdp, tr.row-details td { border-right: 1px solid black; }
.table-vmlist { border-bottom: 1px solid black;}
When hovering over the row, it gets highlighted with CSS:
.table-vmlist tr.row-vm { background-color: #A4C3EF; }
.table-vmlist tr.row-vm:hover { background-color: #91BAEF; }
Now, in IE 7, when moving the mouse from the top to the bottom of the list, every row gets highlighted correctly and no problems happen. But if I move my mouse pointer from the bottom of the list to the top, every second row seems to loose the border.
Can someone explain what the problem is, and how to solve it?
This is my markup:
<tr class="row-vm">
<td class="col-vm-status status-1"><img title="Host Down" alt="Down" src="/Technik/vm-management/img/hoststatus_1.png"></td>
<td class="col-vm-name">V1-VM-1</td>
<td class="col-vm-stati">
<img title="Ping" alt="Ping status" src="/Technik/vm-management/img/servicestatus_3.png">
<img title="CPU" alt="CPU status" src="/Technik/vm-management/img/servicestatus_3.png">
<img title="RAM" alt="RAM status" src="/Technik/vm-management/img/servicestatus_3.png">
<img title="C:\ Diskspace" alt="Disk space status" src="/Technik/vm-management/img/servicestatus_3.png">
</td>
<td class="col-vm-owner">kus</td>
<td class="col-vm-purpose">Citrix Testserver</td>
<td class="col-vm-ip">-</td>
<td class="col-vm-uptime">-</td>
<td class="col-vm-rdp"> </td>
</tr>
And the CSS:
/* VM-Tabelle formatieren */
.table-vmlist { border-collapse: collapse; }
.table-vmlist tr { border: 1px solid black; }
.table-vmlist tr.row-header { border: none; }
.table-vmlist tr.row-vm { background-color: #A4C3EF; }
.table-vmlist tr.row-vm:hover { background-color: #91BAEF; }
.table-vmlist th { text-align: left; }
.table-vmlist td { }
.table-vmlist th, table td { padding: 2px 0px; }
/* Spaltenbreite der VM-Tabelle festlegen */
.table-vmlist #col-status { width: 25px; }
.table-vmlist #col-stati { width: 90px; }
.table-vmlist #col-owner { width: 90px; }
.table-vmlist #col-ip { width: 100px; }
.table-vmlist #col-uptime { width: 70px; }
.table-vmlist #col-rdp { width: 25px; }
.table-vmlist tr.row-details td { padding: 0px 10px; }
/* Kein Rahmen um verlinkte Bilder */
a img { border-width: 0px; }
/* Für Einschaltknopf Hand-Cursor anstatt normalen Pfeil anzeigen */
td.status-1 img { cursor: pointer; }
img.ajax-loader { margin-left: 2px; }
IE fix:
.table-vmlist td { border-top: 1px solid black; }
td.col-vm-status, tr.row-details td { border-left: 1px solid black; }
td.col-vm-rdp, tr.row-details td { border-right: 1px solid black; }
.table-vmlist { border-bottom: 1px solid black;}
Just a thought, but the :hover selector may not be working on ie7 depending on your DOCTYPE. More info here:
http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/619c4492-ab7b-4a8e-b911-5fed8aa49457/