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/
Related
I developed a data grid. I intend that the rows on that grid are separate, so I used border-collapse: separate.
My problem is that using this I can't add a border to the line.
Is there a way to add border to the row and keep the table rows separate?
Example - Stackblitz
<dx-data-grid style="margin-top:50px" class="tableTask" [dataSource]="datas"
[showColumnLines]="false" [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="true">
<dxo-header-filter [visible]="true"></dxo-header-filter>
<dxi-column dataField="ID" dataType="text" caption="ID"></dxi-column>
<dxi-column dataField="Name" dataType="text" caption="Name"></dxi-column>
</dx-data-grid>
css
::ng-deep .tableTask .dx-datagrid-headers {
letter-spacing: 0;
color: #4D4F5C !important;
font-weight: bold !important;
font-size: 13px !important;
background-color:#EDF3F9;
-ms-touch-action: pinch-zoom;
touch-action: pinch-zoom;
border-radius: 8px 8px 0px 0px;
height: 60px;
line-height: 18px;
border-bottom: none !important;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
opacity: 1;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
line-height: 50px;
height: 60px;
}
::ng-deep .tableTask .dx-datagrid-headers + .dx-datagrid-rowsview {
border-top: 0 !important;
}
::ng-deep .tableTask .dx-datagrid-content .dx-datagrid-table {
border-collapse: separate !important;
border-spacing: 0px 16px !important;
}
::ng-deep .tableTask .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
border-bottom: none;
}
If you want keep using border-collapse: separate.
You can simply add border to each td of each row :
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td {
border-bottom: 1px solid red;
}
Add the code above at the end of your CSS.
And if you want to add a full border to your row you can use this :
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td{
border-bottom: 1px solid red;
border-top: 1px solid red;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:first-child {
border-left: 1px solid red !important;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:last-child {
border-right: 1px solid red;
}
I have added !important to border-left because there's already some CSS.
It's difficult as you can't add border to the tr of a table.
You could try to use pseudolement :after to render a line for the table row but now the problem is:
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.
So you could try the "hack" to add transform: scale(1); to your rows to make it work. Like this:
table {border-collapse:separate;border-spacing: 10px;}
td {}
tr {position:relative;transform: scale(1);}
tr:after {
content:'';
display:block;
width:100%;
height:1px;
background-color:#000;
position:absolute;
bottom:0;
left:0;
}
<table>
<tr>
<td>dasdasd</td>
<td>dasda</td>
<td>asdasda</td>
</tr>
<tr>
<td>dasdasd</td>
<td>dasda</td>
<td>asdasda</td>
</tr> <tr>
<td>dasdasd</td>
<td>dasda</td>
<td>asdasda</td>
</tr>
</table>
However, I will never recomend the use of css hacks on any web.
I am arranging my CSS stylesheet for a responsive website, and some elements become hidden under a given screen width (please see the media query in CSS code).
The problem occurs when I have to hide a table column (th, td both identified by a class) for a certain table, whereas the layout of all my tables uses selectors such as last-of-type or last-child, without any class indication. Here, the class which is hidden is .teacher.
I can not make it work with attached CSS, the line I am struggling with is the following:
table.rounded thead th:last-of-type:not([style*='display: none'])
It's my first time so far using the not() selector, and as far as I know CSS is sometimes sensitive to spaces in the selector combination, so as I could spend much time trying to fix syntax whereas it is a misuse issue, or vice versa, I am requesting for support.
I'm looking for:
a way to fix the mistake(s) my combination of selectors, if any. Or
know why it wouldn't work in any way.
otherwise, find an alternative combination of selectors, even if it
is long.
In both cases, I don't want a solution using JS as I have the constraint of not using JS. If there is no solution to above, I will find a turnaround (additional class / IDs, font size/color, width, etc.).
body {
background-color: #ffffff;
/* White */
}
* {
font-family: palatino, verdana;
word-wrap: break-word;
}
em {
font-style: normal;
font-weight: bold;
}
strong {
/* bold by default */
}
p {
color: #000000;
/* Black */
}
.centered {
text-align: center;
}
th.hours,
td.hours {
width: 120px;
}
td.hours {
font-size: 0.9em;
}
th.teacher,
td.teacher {
min-width: 90px;
max-width: 130px;
}
td.teacher {
font-size: 0.9em;
}
/* Section */
section {
float: center;
border: solid black 1px;
background-color: blue;
padding: 5px;
-webkit-border-radius: 0px 0px 8px 8px;
/*Safari,Opera,Chrome*/
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
}
section p {
color: #000000;
/* Black */
font-size: 1em;
}
section table {
float: center;
max-width: 90%;
margin: auto;
border-collapse: collapse;
/* does not work with property Radius */
border-spacing: 0px;
}
section table th {
background-color: silver;
/*gray*/
}
section table td {
background-color: #ffffff;
/* White */
}
section table th,
section table td {
color: #000000;
/* Black */
font-size: 1em;
margin: 5px 0px 3px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
vertical-align: middle;
text-align: left;
}
/* Table with rounded corners */
/* - borders */
table.rounded {
border-collapse: separate;
}
table.rounded tr {
border: 0px;
}
table.rounded th,
table.rounded td {
border-top: 1px solid black;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid black;
}
table.rounded th:first-of-type,
table.rounded td:first-of-type {
border-left: 1px solid black;
}
table.rounded tr:last-of-type td {
border-bottom: 1px solid black;
}
table.rounded td.afterrowspan {
/* follows in next tr, after the tr including the td which has rowspan defined */
border-left: 0px;
}
/* - corners */
table.rounded thead th:first-of-type {
/* 10px 0 0 0 : Top Left, for table with min 2 columns */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
table.rounded thead th:last-of-type:not([style*='display: none']) {
/* 0 10px 0 0 : Top Right, for table with min 2 columns */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
table.rounded tbody tr:last-child td:last-child {
/* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
/* tr:last-child td:last-child because tr:last-of-type td:last-of-type doesn't work with IE */
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:first-of-type {
/* 0 0 0 10px : Bottom Left, for table with min 2 columns */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* Mobile - or thin screens - specificities */
#media (max-width: 600px) {
section {
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
section table th,
section table td {
font-size: 0.80em;
}
th.hours,
td.hours {
width: 105px;
}
td.hours {
font-size: 0.80em;
}
th.teacher,
td.teacher {
display: none;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="style.css">
<title>Courses</title>
</head>
<body>
<section class="element_2">
<p class="centered">
<table class="rounded">
<thead>
<tr>
<th class="centered">Day</th>
<th class="centered hours">Hours</th>
<th class="centered">Course</th>
<th class="centered teacher">Teacher</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centered" rowspan="3"><strong>Monday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:00</td>
<td><em>How to climb a building</em> (beginners)</td>
<td class="teacher" rowspan="3">The Amazing Spiderman</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:00 - 21:00</td>
<td><em>How to fall from a building's wall</em> (beginners)</td>
</tr>
<tr>
<td class="centered hours afterrowspan">21:00 - 22:00</td>
<td><em>How to climb a building</em> (experienced)</td>
</tr>
<tr>
<td class="centered" rowspan="2"><strong>Thursday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:30</td>
<td><em>How to stay calm</em> (beginners)</td>
<td class="teacher" rowspan="2">The Incredible Hulk</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:30 - 22:00</td>
<td><em>How to stay calm</em> (experienced)</td>
</tr>
<tr>
<td class="centered"><strong>Friday</strong></td>
<td class="centered hours">19:00 - 22:00</td>
<td colspan=2>Description of various events in a loooooooooooonger text. Longer than that. About this long.</td>
</tr>
</tbody>
</table>
</p>
</section>
</body>
</html>
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.
So I am working on a form. And part of how I want the form to function requires a select box and an input(text) box in the same tr. The other items in that tr are just text boxes. I am having a problem getting the text box that shares a tr with the select to go to where the solo text box goes. Therefore, the right edges do not line up.
What I am looking for...
1) I want the text boxes that are solo to fill the box, ideally without adding width. I am fine with a min width of 550px, but not necessary.
2) I want the text boxes that are with the select to fill the rest of the box, meeting the same edge as the solo boxes. Satisfying OCD...
CSS for the table:
table, th, td {
border: 1px solid var(--main-color);
padding: 6px 8px;
white-space: nowrap;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
thead {
background-color: #333;
border-bottom: 3px solid var(--main-color);
}
thead th, thead a, thead a:visited {
color: white;
}
th.active {
background: var(--main-color);
}
table > :not(thead) tr th {
background-color: #333;
border-right: 3px solid var(--main-color);
color: white;
text-align: right;
}
tr {
height: auto;
}
td {
color: black;
}
table input {
width:100%; /* simply scale inputs to table cell size */
}
td.input-group input {
width:auto; /* but not for radios or checks */
}
HTML (shortened, just one solo text box and one that is sharing with the select):
<table>
<tr>
<td>Serial Number: </td>
<td><input type="text" name="device-serial-number" maxlength="8" required></td>
</tr>
<tr>
<td>MAC Address NIC: </td>
<td>
<select name="media-nic">
<option value="">Media</option>
<option value="eth">Ethernet</option>
<option value="inf">Infiniband</option>
<option value="fib">Fiber</option>
</select>
<input type="text" name="mac-nic" maxlength="17">
</td>
</tr>
</table>
Fiddle with more CSS and such: https://jsfiddle.net/2o0sn4ep/
You could use the trick marked as correct answer in this question
Using this nice "trick" I modified a bit your css and html (I added a div container to wrap your second input).
It's responsive as well, your inputs will always fill whatever width remaining in the container
:root {
--main-color: rgb(46, 58, 150);
}
* {
box-sizing: border-box;
}
table,
th,
td {
border: 1px solid var(--main-color);
padding: 6px 8px;
white-space: nowrap;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
thead {
background-color: #333;
border-bottom: 3px solid var(--main-color);
}
thead th,
thead a,
thead a:visited {
color: white;
}
th.active {
background: var(--main-color);
}
table >:not(thead) tr th {
background-color: #333;
border-right: 3px solid var(--main-color);
color: white;
text-align: right;
}
tr {
height: auto;
}
td:first-child {
text-align: right;
}
td {
color: black;
}
input[type=text] {
padding: 9px 10px;
font-size: 16px;
width: 100%;
}
select {
padding: 9px 10px;
font-size: 16px;
height: 41px;
float: left;
margin-right: 5px;
}
option {
padding-top: 2px;
padding-bottom: 2px;
}
div {
width: auto;
overflow: hidden;
}
<table>
<tr>
<td>Serial Number: </td>
<td>
<input type="text" maxlength="8" required>
</td>
</tr>
<tr>
<td>MAC Address NIC: </td>
<td>
<select>
<option value="">Media</option>
<option value="eth">Ethernet</option>
<option value="inf">Infiniband</option>
<option value="fib">Fiber</option>
</select>
<div>
<input type="text" maxlength="17">
</div>
</td>
</tr>
</table>
I'm having some issues with lining up similarly sized divs inside a td Chrome inspector confirms pixel size is the same. Trying to do a scheduler demo. Any ideas how to fix the alignment issue would be great! thanks!
I'll admit the small picture doesn't look like much, but it's there and over the length of 24 hours, it's certainly looks off.
I've played with inspector for the last hour, but just can't find it!
My Html code snippet...
<table>
<tbody>
<tr>
<td class="text-right ">
<div class="time_label">6am</div>
<div class="time_label">7am</div>
<div class="time_label">8am</div>
<div class="time_label">9am</div>
<div class="time_label">10am</div>
<div class="time_label">11am</div>
<div class="time_label">12pm</div>
<div class="time_label">1pm</div>
<div class="time_label">2pm</div>
<div class="time_label">3pm</div>
<div class="time_label">4pm</div>
<div class="time_label">5pm</div>
<div class="time_label">6pm</div>
<div class="time_label">7pm</div>
<div class="time_label">8pm</div>
<div class="time_label">9pm</div>
</td>
<td class="area area1">
<div class="block block1"></div>
<div class="block block2"></div>
My Sass snippet, this is inside of a bootstrap row/col-md-12...
$booker-container-height: 618px;
$booker-table-margin: 10px;
$booker-height: $booker-container-height - $booker-table-margin;
.booker_wrapper {
box-shadow: 0 0 12px #888;
}
.booker {
table {
margin: $booker-table-margin;
height: $booker-height;
table-layout: fixed;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.time_label {
height: $booker-height/16;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.block {
height: $booker-height/32;
border-left: 1px solid #DDD;
}
.area:last-child{
border-right: 1px solid #DDD;
}
.area>.block:first-child
{
border-top: 1px solid #DDD;
}
.area>.block:nth-child(even)
{
border-bottom: 1px solid #DDD;
}
.area>.block:nth-child(odd)
{
border-bottom: 1px solid #DDD;
}
}
You should used the amazing css property box-sizing: border-box; supporting by IE8 to! Then set the height's items of left column at the double of the right and an border-bottom for each, like:
html:
<table>
<tr>
<th>
<div>Hello</div>
<div>Heros</div>
</th>
<td>
<div>World</div>
<div>Toto</div>
<div>Batman</div>
<div>Superman</div>
</td>
</tr>
</table>
scss:
* {
#include box-sizing(border-box);
}
$dark: #202020;
table {
border: 1px solid $dark;
border-bottom: 0;
}
th {
div {
height: 60px;
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
}
}
td {
div {
height: 30px;
border-bottom: 1px solid $dark;
}
}
I made a codepen here: http://codepen.io/pik_at/pen/qEKKBy