I have a table with, let's say, 20 rows. I know I can use the nth-child css to change the background of the rows, but I don't know how to change the background for a repeating range of rows. For example, I want row 1-3 green, 4-6 white, 7-9 green,etc..
I tried chaining the nth-child, but I can't come up with the correct results.
This resembles the table I have:
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
any help is greatly appreciated!!!
You can use formulas in nth-child:
tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
background-color: green;
}
This will select every 6th child and the two subsequent ones (means: always the first three out of six).
Tailored to your example:
tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3) {
background-color: green;
}
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
</table>
tr {
background-color: red;
}
tr:nth-child(n+4) {
background-color: green;
}
tr:nth-child(n+7) {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border=1>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
</body>
</html>
Try this
.table tr:nth-child(3n + 1) td:nth-child(odd) {
background: blue;
}
.table tr:nth-child(3n + 1) td:nth-child(even) {
background: green;
}
.table tr:nth-child(3n + 1) td:first-child {
background: red;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(odd) {
background: orange;
}
.table tr:nth-child(3n + 1) + tr td:nth-child(even) {
background: black;
}
.table tr:nth-child(3n + 1) + tr + tr td {
background: yellow;
}
<table border=1 class="table">
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
<tr>
<td width='30px' rowspan='3'>1</td>
<td width='150px'>1</td>
<td width='150px'>1</td>
</tr>
<tr>
<td width='150px'>2</td>
<td width='150px'>2</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>3</td>
</tr>
<tr>
<td width='30px' rowspan='3'>4</td>
<td width='150px'>4</td>
<td width='150px'>4</td>
</tr>
<tr>
<td width='150px'>5</td>
<td width='150px'>5</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>6</td>
</tr>
<tr>
<td width='30px' rowspan='3'>7</td>
<td width='150px'>7</td>
<td width='150px'>7</td>
</tr>
<tr>
<td width='150px'>8</td>
<td width='150px'>8</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>9</td>
</tr>
<tr>
<td width='30px' rowspan='3'>10</td>
<td width='150px'>10</td>
<td width='150px'>10</td>
</tr>
<tr>
<td width='150px'>11</td>
<td width='150px'>11</td>
</tr>
<tr class='trContacts'>
<td colspan='3'>12</td>
</tr>
</table>
Related
trying to change the style of a number inside a cell without also changing the style of the cell itself.
i'm learning web developing and someone suggested creating a game would be a good idea. I'm trying to create a Sudoku game, with the regular style and set up. it's looking the way i want it to except for i can't change the color of the numbers inside the cells without also changing the color of the cell itself. I have the styling in a separate css file and tried making changes to it and also adding to the html file but i can't get it to work. Any suggestions will be appreciated.
here's the html
<html>
<head>
<link rel="stylesheet" href="assignment 1.css">
<title>sudoku</title>
</head>
<table>
<colgroup><col><col><col>
<colgroup><col><col><col>
<colgroup><col><col><col>
<tbody>
<tr> <td>1 <td> <td>3 <td>6 <td> <td>4 <td>7 <td> <td>9
<tr> <td> <td>2 <td> <td> <td>9 <td> <td> <td>1 <td>
<tr> <td>7 <td> <td> <td> <td> <td> <td> <td> <td>6
<tbody>
<tr> <td>2 <td> <td>4 <td> <td>3 <td> <td>9 <td> <td>8
<tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
<tr> <td>5 <td> <td> <td>9 <td> <td>7 <td> <td> <td>1
<tbody>
<tr> <td>6 <td> <td> <td> <td>5 <td> <td> <td> <td>2
<tr> <td> <td> <td> <td> <td>7 <td> <td> <td> <td>
<tr> <td>9 <td> <td> <td>8 <td> <td>2 <td> <td> <td>5
and the css
table { border-collapse: collapse; font-family: Palatino linotype, sans-
serif; }
colgroup, tbody { border: solid medium;}
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center;
padding: 0; }
https://en.wikipedia.org/wiki/Sudoku#/media/File:Sudoku_Puzzle_by_L2G-20050714_solution_standardized_layout.svg
i want the look to be similar to this, where the constant numbers are a different color.
You need to close the tbody, tr and td tags. To learn more about tables : https://www.w3schools.com/html/html_tables.asp
I have tried two options.
Red color text covered with th instead of td
Blue color td has a class and styled according to it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table {
font-size: 50px;
background: #000;
}
table table {
background: #fff;
}
table table td, table table th {
border: 1px solid #000;
}
table table th {
color: red;
}
table table td.blue{color:blue;}
</style>
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle" class="blue">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle" class="blue">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td width="200"><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle" class="blue">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle" class="blue">2</td>
<td align="center" valign="middle" class="blue">3</td>
</tr>
<tr>
<td align="center" valign="middle" class="blue">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle" class="blue">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
<td><table width="100%" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center" valign="middle">1</th>
<td align="center" valign="middle">2</td>
<td align="center" valign="middle">3</td>
</tr>
<tr>
<td align="center" valign="middle">4</td>
<th align="center" valign="middle">5</th>
<td align="center" valign="middle">6</td>
</tr>
<tr>
<td align="center" valign="middle">7</td>
<th align="center" valign="middle">8</th>
<th align="center" valign="middle">9</th>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Alignment of borders of table using bootstrap table-bordered class is not proper when scrollbar appears, Itried many workarounds, but problem is still there, can someone please help?
Here is my hbs:
<title>UI</title>
<div ng-controller="appCtrl">
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;table-layout:fixed;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:block;height:164px;overflow:auto;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
Alignment is not proper: 1
Try this out, the major cause of the issue of border not aligning is table-layout:fixed; on the thead. You can run it an see
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:table;height:164px;overflow:auto; table-layout:fixed;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have data where each row has an ID. For some rows, the IDs match others. This means that they are part of the same "group". They may have values in different columns, but they don't over lap. I'm trying to squash the rows with the same IDs, but can't figure it out, (so in the example below, the result would just have 3 rows, for IDs 1 2 and 3)
Example (run the snippet):
I've tried using aggregate, but I can't find a concat function for Strings. Thanks.
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l">ID</th>
<th class="tg-yw4l">Name</th>
<th class="tg-yw4l">Info</th>
<th class="tg-yw4l">A</th>
<th class="tg-yw4l">B</th>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l">Jack</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">x</td>
</tr>
<tr>
<td class="tg-yw4l">1</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">x</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l">Marin</td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">Y</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">X</td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">ABC</td>
<td class="tg-yw4l">X</td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l">3</td>
<td class="tg-yw4l">Giraffe</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">Y</td>
</tr>
</table>
Appears in firefox only. Just add linebreak at the beginning of 1 cell to see what happens, or see screenshot.
What I want:
1. Column width must stay constant
2. Table must grow only in height
<style>
td {
white-space: pre-wrap;
word-break: break-all;
width: 200px;
}
</style>
<table border="1">
<caption>Таблица размеров обуви</caption>
<tr>
<th>Россия</th>
<th>Великобритания</th>
<th>Европа</th>
<th>Длина ступни, см</th>
</tr>
<tr>
<td contenteditable="true">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td contenteditable="true">3,5</td>
<td contenteditable="true">36</td>
<td contenteditable="true">23</td>
</tr>
<tr>
<td contenteditable="true">35,5</td>
<td contenteditable="true">4</td>
<td contenteditable="true">36⅔</td>
<td contenteditable="true">23–23,5</td>
</tr>
<tr>
<td contenteditable="true">36</td>
<td contenteditable="true">4,5</td>
<td contenteditable="true">37⅓</td>
<td contenteditable="true">23,5</td>
</tr>
<tr>
<td contenteditable="true">36,5</td>
<td contenteditable="true">5</td>
<td contenteditable="true">38</td>
<td contenteditable="true">24</td>
</tr>
<tr>
<td contenteditable="true">37</td>
<td contenteditable="true">5,5</td>
<td contenteditable="true">38⅔</td>
<td contenteditable="true">24,5</td>
</tr>
<tr>
<td contenteditable="true">38</td>
<td contenteditable="true">6</td>
<td contenteditable="true">39⅓</td>
<td contenteditable="true">25</td>
</tr>
<tr>
<td contenteditable="true">38,5</td>
<td contenteditable="true">6,5</td>
<td contenteditable="true">40</td>
<td contenteditable="true">25,5</td>
</tr>
<tr>
<td contenteditable="true">39</td>
<td contenteditable="true">7</td>
<td contenteditable="true">40⅔</td>
<td contenteditable="true">25,5–26</td>
</tr>
<tr>
<td contenteditable="true">40</td>
<td contenteditable="true">7,5</td>
<td contenteditable="true">41⅓</td>
<td contenteditable="true">26</td>
</tr>
<tr>
<td contenteditable="true">40,5</td>
<td contenteditable="true">8</td>
<td contenteditable="true">42</td>
<td contenteditable="true">26,5</td>
</tr>
<tr>
<td contenteditable="true">41</td>
<td contenteditable="true">8,5</td>
<td contenteditable="true">42⅔</td>
<td contenteditable="true">27</td>
</tr>
<tr>
<td contenteditable="true">42</td>
<td contenteditable="true">9</td>
<td contenteditable="true">43⅓</td>
<td contenteditable="true">27,5</td>
</tr>
<tr>
<td contenteditable="true">43</td>
<td contenteditable="true">9,5</td>
<td contenteditable="true">44</td>
<td contenteditable="true">28</td>
</tr>
<tr>
<td contenteditable="true">43,5</td>
<td contenteditable="true">10</td>
<td contenteditable="true">44⅔</td>
<td contenteditable="true">28–28,5</td>
</tr>
<tr>
<td contenteditable="true">44</td>
<td contenteditable="true">10,5</td>
<td contenteditable="true">45⅓</td>
<td contenteditable="true">28,5–29</td>
</tr>
<tr>
<td contenteditable="true">44,5</td>
<td contenteditable="true">11</td>
<td contenteditable="true">46</td>
<td contenteditable="true">29</td>
</tr>
<tr>
<td contenteditable="true">45</td>
<td contenteditable="true">11,5</td>
<td contenteditable="true">46⅔</td>
<td contenteditable="true">29,5</td>
</tr>
<tr>
<td contenteditable="true">46</td>
<td contenteditable="true">12</td>
<td contenteditable="true">47⅓</td>
<td contenteditable="true">30</td>
</tr>
<tr>
<td contenteditable="true">46,5</td>
<td contenteditable="true">12,5</td>
<td contenteditable="true">48</td>
<td contenteditable="true">30,5</td>
</tr>
<tr>
<td contenteditable="true">47</td>
<td contenteditable="true">13</td>
<td contenteditable="true">48⅔</td>
<td contenteditable="true">31</td>
</tr>
<tr>
<td contenteditable="true">48</td>
<td contenteditable="true">13,5</td>
<td contenteditable="true">49⅓</td>
<td contenteditable="true">31,5</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/s8q0evkf/
Use max-width to set a maximum width
td {
white-space: pre-wrap;
word-break: break-all;
width: 200px;
max-width: 200px;
}
The overflowing content will now overflow in height instead of the width.
Documentation: http://www.w3schools.com/cssref/pr_dim_max-width.asp
Alright, let's try this again.
This is part of the code of my table right now.
<table id="infantryTbl">
<thead>
<tr>
<th class="country">Country</th>
<th class="type">Type</th>
<th class="nr">Nr</th>
<th class="name">Name</th>
<th class="marking">Markings</th>
<th class="comment">Comment</th>
<th class="status">Status</th>
<th class="code">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
</tbody>
</table>
With this css I do get every other <tr> in a different color.
table tr:nth-child(odd) td{
background:#c1c1c1;color:#1f1f1f;
}
table tr:nth-child(even) td{
background:#b0b0b0;color:#1f1f1f;
}
All good so far.
What I want is to change the background and text color on all the cells with the class "painted" and rows with the class "titel".
*.titel {background:#424242;}
.painted {background:#375e37;}*
As it is now nothing happens when I change the class since the odd/even CSS seems to override everything.
How to I make "titel" and "painted" shown?
Because you used table tr td for your odd/even rules, you need the same specificity (or higher) for your override rules, which means you can't use only the class names, like .painted, as you see in my last rule. It just doesn't do anything.
table tr:nth-child(odd) td{
background:#c1c1c1;color:#1f1f1f;
}
table tr:nth-child(even) td{
background:#b0b0b0;color:#1f1f1f;
}
table tr td.painted { /* this works */
background:yellow;
color:red;
}
table tr td.titel { /* this works */
background:red;
color:black;
}
.painted { /* this one doesn't work */
background:lime;
}
<table id="infantryTbl">
<thead>
<tr>
<th class="country">Country</th>
<th class="type">Type</th>
<th class="nr">Nr</th>
<th class="name">Name</th>
<th class="marking">Markings</th>
<th class="comment">Comment</th>
<th class="status">Status</th>
<th class="code">Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
<tr>
<td class="titel" colspan="8">Parachute Company</td>
</tr>
<tr>
<td class="center">British</td>
<td class="center">Command</td>
<td class="right">2st</td>
<td class="left">Rifle/MG</td>
<td class="left">Company Cmd</td>
<td class="left">Parachute Company</td>
<td class="painted">Painted</td>
<td class="center">BBX16</td>
</tr>
</tbody>
</table>