Style properties defined under one class affects the properties of another element with a different class definition.
Specifically the styles for the th and td from the Movement table are overwriting the ones defined in the Characteristics table. Inspecting the styles within Chrome it clearly shows that the Movement styles are trumping the Characteristic settings.
A working example of the code is below. It can run at this link from w3chools.com.
I've tried numerous variations and have been unable to correct it. Checked here and other sites for solutions but to no avail.
I'd really like to know what I'm doing wrong. Thanks.
.grid-container-0 {
display: grid;
grid-gap: 1px;
grid-template-columns: auto auto 5px auto;
width: 200mm;
border: solid black thin;
padding: 0px;
background-color: white;
}
.grid-container-2 {
display: grid;
grid-gap: 1px;
border: none;
padding: 2px;
background-color: white;
}
.grid-container-5 {
display: grid;
grid-gap: 1px;
border: none;
padding: 1px;
background-color: white;
}
.title {
padding: 2px;
text-align: left;
font-size: 12pt;
font-weight: bold;
color: white;
background-color: black;
}
div.characteristics {
grid-row: 2;
grid-column: 1 / span 2;
}
.characteristics th,
td {
padding: 2px;
text-align: center;
font-size: 10pt;
}
.characteristics th:last-of-type,
td:last-of-type {
text-align: left;
}
.characteristics tr:last-of-type {
font-weight: bold;
}
div.movement {
grid-row: 4;
grid-column: 2;
}
.movement th,
td {
margin: 0px;
padding: 0px 2px;
text-align: left;
font-size: 8pt;
}
<body>
<div class="grid-container-0">
<div class="grid-item characteristics">
<div class="grid-container-2">
<div class="grid-item characteristics-1 title">CHARACTERISTICS</div>
<div class="grid-item characteristics-2">
<table>
<tr>
<th>Val</th>
<th>Char</th>
<th>Points</th>
<th>Roll</th>
<th>Notes</th>
</tr>
<tr>
<td>10</td>
<td>STR</td>
<td>0</td>
<td>11-</td>
<td>HTH Damage 2d6 END [1]</td>
</tr>
<tr>
<td>10</td>
<td>DEX</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>CON</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>INT</td>
<td>0</td>
<td>11-</td>
<td>PER Roll 11-</td>
</tr>
<tr>
<td>10</td>
<td>EGO</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>PRE</td>
<td>0</td>
<td>11-</td>
<td>PRE Attack: 2d6</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td>3</td>
<td>OCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>DCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>OMCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>DMCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>SPD</td>
<td>0</td>
<td></td>
<td>Phases: 6, 12</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td>2</td>
<td>PD</td>
<td>0</td>
<td></td>
<td>2 PD (0 rPD)</td>
</tr>
<tr>
<td>2</td>
<td>ED</td>
<td>0</td>
<td></td>
<td>2 ED (0 rED)</td>
</tr>
<tr>
<td>4</td>
<td>REC</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>END</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>BODY</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>STUN</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>0</td>
<td>Total Characteristic Points</td>
</tr>
</table>
</div>
</div>
</div>
<div class="grid-item movement">
<div class="grid-container-5">
<div class="grid-item movement-1 title">MOVEMENT</div>
<div class="grid-item movement-2">
<table>
<tr>
<th>Type</th>
<th>Total</th>
</tr>
<tr>
<td>Run</td>
<td>12m[24m NC]</td>
</tr>
<tr>
<td>Swim</td>
<td>4m[8m NC]</td>
</tr>
<tr>
<td>H. Leap</td>
<td>4m</td>
</tr>
<tr>
<td>V. Leap</td>
<td>2m</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
When you write .characteristics th, td in your CSS, you're apparently expecting that to apply to .characteristics th and .characteristics td elements.
However, that isn't what it means: it actually applies to .characteristics th elements and all td elements. So that's why you're seeing styles intended for one class in places they shouldn't be.
Here's an example:
.red i, b {color:red}
.blue i, b {color:blue}
<div class="red">1 <i>2</i> <b>3</b></div>
<div class="blue">4 <i>5</i> <b>6</b></div>
You'd expect 2 and 3 to be red, and 5 and 6 to be blue, but that doesn't actually happen: both the color:red and color:blue rules apply to all b elements, so they'll end up the same color as each other (in this case, blue).
To fix this, .characteristics th, td has to be written as .characteristics th, .characteristics td (and likewise with other places where you've used commas).
Related
I've created a simple table using html and a bit of bootstrap, but the last rowspan doesn't work as I thought it will, here's code:
I wanted 4 red-marked cells to be one, so I've replaced first <td>group1</td> with <td rowspan="4">group1</td> and removed remaining 3 <td>group1</td> but it has messed up whole table.
Also it is placed it <div class="col-lg-7 mb-4"> div, but I've also tried without any div - the effect was the same. I'm not sure what is causing that problem, considering that the rest rowspans is working just fine.
/* I don't think CSS is needed, but just in case: */
table.table-bordered {
border: 1px solid #2f8dff!important;
box-shadow: 0px 0px 100px 0px #2f8dff;
margin-top: 20px;
text-transform: uppercase;
font-size: 12px;
color: white;
}
table.table-bordered>thead>tr>th {
border: 1px solid #2f8dff!important;
}
table.table-bordered>tbody>tr>td {
border: 1px solid #2f8dff!important;
}
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">17:00-18:00</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">18:00-19:00</td>
<td>1</td>
<td rowspan="2">group3</td>
<td>3</td>
<td>4</td>
<td rowspan="2">group3</td>
</tr>
<tr>
<td rowspan="2">group2</td>
<td>8</td>
<td rowspan="2">group2</td>
</tr>
<tr>
<td rowspan="2">19:00-20:00</td>
<td rowspan="4">group1</td>
<td rowspan="2">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="3">group1</td>
<td rowspan="3">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="2">20:00-21:00</td>
<td>3</td>
<td>group1</td>
</tr>
<tr>
<td>7</td>
<td>group1</td>
</tr>
</tbody>
</table>
What shall I do?
Thanks in advance!
I don't really know what you mean by "messed up whole table". After adding the row-span="4" and removing the three following td tags, the table looked just fine for me:
The only thing I can see is the changing height of that table cell. This can be prevented by adding this CSS:
tr {
height: 1rem;
}
It makes every row equal height and produces following result:
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would like to create for example below html tables, It bsically come from square tables.
I tried sometimes, but I couldn't figure out how to change height of each cells.
If someone has opinion, please let me know.
Thanks
table {
border-collapse:collapse;}
td {
padding:5px;
border:solid black 1px;}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Maybe with the :empty CSS pseudo-class?
Removing the padding of empty table cells:
table {
border-collapse:collapse;
}
td {
padding:5px;
border:solid black 1px;
}
td:empty {
padding: 0;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Not displaying empty table cells.
table {
border-collapse:collapse;
}
td {
padding:5px;
border:solid black 1px;
}
td:empty {
display: none !important;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
If I'm reading you right my solution is to add specific classes to the cells that you'd like to be different, that way you can specify the different in padding of the cells with numbers.
table {
border-collapse:collapse;}
td {
padding:25px;
border:solid black 1px;}
.tall {
padding-right:100px;
padding-bottom:100px;
}
<table>
<tr>
<td class="tall">1</td>
<td class="tall">2</td>
<td class="tall">3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="tall">4</td>
<td class="tall">5</td>
<td class="tall">6</td>
</tr>
</table>
Check out my codepen here:
https://codepen.io/danhebdon/pen/RwPzzvm
Here is a duplicate version of the original table:
table {
width: 100%;
border: 3px solid gray;
border-collapse:collapse;
font-family: 'Arial', sans-serif;
font-size: 36px;
}
td {
border: 3px solid gray;
height: 200px;
text-align: top;
padding: 12px;
}
.smallheight {
height: 50px;
}
<table>
<tr>
<td valign="top">1</td>
<td valign="top">2</td>
<td valign="top">3</td>
</tr>
<tr>
<td class="smallheight"></td>
<td class="smallheight"></td>
<td class="smallheight"></td>
</tr>
<tr>
<td class="smallheight"></td>
<td class="smallheight"></td>
<td class="smallheight"></td>
</tr>
<tr>
<td class="smallheight"></td>
<td class="smallheight"></td>
<td class="smallheight"></td>
</tr>
<tr>
<td valign="top">4</td>
<td valign="top">5</td>
<td valign="top">6</td>
</tr>
</table>
CodePen: https://codepen.io/marchmello/pen/KKpjjvz
I have a table with different number of <td>, something like this:
<table>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
</tr></tbody>
<tbody><tr><td>1</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr></tbody>
</table>
I want to draw a line under every row, I tried these styles:
table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
This is what I get:
Lines are not reaching the end of the table, this is the expected result:
Is this possible using css only?
table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
<table>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
</tr></tbody>
<tbody><tr><td>1</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr></tbody>
</table>
Use a pseudo element to create a long line and hide the overflow:
table {
border-collapse: collapse;
empty-cells: show;
overflow: hidden;
}
td {
position: relative;
padding: 5px;
}
td:first-child:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -100vw;
;
height: 1px;
background: #000;
}
<table>
<tbody>
<tr>
<td>111</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>33</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Your new code:
table {
border-collapse: collapse;
empty-cells: show;
}
tr {
border-bottom: 1px solid #000;
display: block;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Just changed the display CSS property of the rows to block.
This isn't the perfect solution for dynamic data so I would suggest making a table out of divisions and CSS.
I also suggest that you accept #Temani Afif answer since it is better than mine in the way that you can keep your table structure as well using the pseudo elements.
Is the first row of an HTML table with th tags meant to be row 0? Because if I style the table rows with
.t01 tr:nth-child(even) {
color: red;
}
.t01 tr:nth-child(odd) {
color: white;
}
both the first row and the second row have the text color white. But the second row should be red, because 2 is even.
Without your Code it's hard to help, it shoud work as it is.
My guess is, you are using <thead> and <tbody> which results in 2 containers holding <tr> tags. So the nth-child of <thead> is odd and the nth-child of <tbody> is odd too
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.container div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container p {
font-size: 8pt;
}
.t01 {
background-color: #3d3d3d;
}
.t01 tr:nth-child(even) {
color: red;
}
.t01 tr:nth-child(odd) {
color: white;
}
.t02 {
background-color: #3d3d3d;
}
.t02 tr:nth-child(even) {
color: red;
}
.t02 tr:nth-child(odd) {
color: white;
}
.t03 {
background-color: #3d3d3d;
}
.t03 thead tr:first-child {
color: red;
}
.t03 tbody tr:nth-child(even) {
color: red;
}
.t03 tbody tr:nth-child(odd) {
color: white;
}
<div class="container">
<div>
<table class="t01">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<p>No <thead> & <tbody></p>
</div>
<div>
<table class="t02">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>With <thead> & <tbody></p>
</div>
<div>
<table class="t03">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>Fix for <thead> & <tbody></p>
</div>
</div>
You may need to reset the browser data on you browser. Especially if you've been playing around with the CSS, this can cause the page to look off.
Yes, that is true, the first row of the HTML table starts at 0.
For example :
// We have a table containing 3 rows
<table id="myTable">
<tr>
<td>Row1 cell1</td>
</tr>
<tr>
<td>Row2 cell1</td>
</tr>
<tr>
<td>Row3 cell1</td>
</tr>
</table>
We are retrieving 0th row
alert(document.getElementById("myTable").rows[0].innerHTML);
Output of this will be:
Row1 Cell1
This question already has answers here:
HTML table with fixed headers?
(31 answers)
Closed 7 years ago.
I know how to make a fixed table-header a few different ways, however I'm looking for the best way, and I only want to use <table>,<thead>,<tbody>,<tr>,<th>,<td> tags which the HTML spec provides you.
Here is a dummy table structure:
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
Try this working demo. Below code:
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
border-collapse: separate;
border-spacing: 0 1px;
}
table thead {
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
tbody td,
thead th {
border-right: 1px solid transparent;
vertical-align: middle;
}
thead th {
height: 35px;
font-size: 16px;
text-align: left;
text-transform: uppercase;
}
tbody td {
text-align: left;
height: 30px;
background: #d5d5d5;
}
.table-cont {
width: 100%;
height: 350px;
}
<div class="table-cont">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
</div>