In table I have some lines. I am setting :hover to tbody>tr and it doesn't work. However, if I set the same :hover selector to tbody>td does work fine.
Anybody can help me?
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
table {
width: 100%
}
table thead tr th:first-child {
width: 34%
}
table thead tr th {
width: 2%;
background: #2F75B5;
font-weight: normal;
padding: 2px 3px;
color: #FFFFD4;
}
table tbody tr td:first-child {
width: 34%
}
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
background-color: #DDEBF7
}
table tbody td:hover {
background-color: red
}
.blue {
background-color: #79B7E7
}
.red {
background: #F08080;
font-weight: normal;
}
.green {
background-color: #60CA8F;
font-weight: normal;
}
html {
margin: 1px;
}
body {
font-size: 80%
}
p {
font-size: medium;
}
html,
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
overflow: hidden;
height: 98%;
}
.number {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Colaborador</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
</tbody>
</table>
</body>
</html>
Since the td element already contains a background color, you need to select the td after hovering tr to override it.
table tbody tr:hover td {
background-color: red
}
JSfiddle Demo
table tbody tr:hover td {
background-color: red
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
table {
width: 100%
}
table thead tr th:first-child {
width: 34%
}
table thead tr th {
width: 2%;
background: #2F75B5;
font-weight: normal;
padding: 2px 3px;
color: #FFFFD4;
}
table tbody tr td:first-child {
width: 34%
}
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
background-color: #DDEBF7
}
table tbody td:hover {
background-color: red
}
.blue {
background-color: #79B7E7
}
.red {
background: #F08080;
font-weight: normal;
}
.green {
background-color: #60CA8F;
font-weight: normal;
}
html {
margin: 1px;
}
body {
font-size: 80%
}
p {
font-size: medium;
}
html,
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
overflow: hidden;
height: 98%;
}
.number {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Colaborador</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
</tbody>
</table>
</body>
</html>
Try this.
tbody > tr:hover td {
/*style*/
}
Your td already have a background-color, which can be overwritten, as Manoj Kumar have said and shown in his answer.
If you went the whole row to change the background-color, you need to do the following:
Remove background-color from td and add it to the tr:
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
}
table tbody tr {
background-color: #DDEBF7
}
Change the hover to the tr:
table tbody tr:hover {
background-color: red
}
To show it works, heres a JSFiddle
tbody>td
'>' - stands for immediate child
Means the style will be only applied to td which is the immediate child of the tbody.
Make sure you have td as a direct child of tbody.
Is this the behaviour you r looking for ??
try this js fiddle
http://jsfiddle.net/ug23pLg5/
Related
I have a small problem with my table. I am creating a webshop with shopify and there you can write your own html code for your table.
Basically the problem is, that the table doesn't fill out the entire site. It does on mobile version because I used padding and thats necessary beause otherwise there the table shrinks to much. I just need everything staying the same but the table should fill out the whole space of the site when there is more. I tried this using flex grow 1 but it didn't work.
What it look's like if i set width to 100% and without flexbox:
desktop
mobile
What it looks like with flexbox:
mobile flexbox
desktop flexbox
I need another way to adjust the table object to full width without grow but it should have a minimum width because otherwise on mobile version the table looks shitty. Is there a way to grow the table lagerger when the space is given even with a set minimum padding so the table cant shrink under that on mobile.
Here is the code of my table:
<style type="text/css">
<!-- table.sizingchart {
display: flex;
text-align: center;
border-collapse: collapse;
white-space: nowrap;
overflow-x: auto;
}
table.sizingchart td,
table.sizingchart tr {
padding: 5px 15px;
flex-grow: 1;
}
table.sizingchart tr:nth-child(even) {
background: #EEEEEE;
}
-->
</style>
<table class="sizingchart">
<tbody>
<tr>
<td><strong>Length (mm)</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>US Size</strong></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td><strong>UK & AUS Size</strong></td>
<td>F</td>
<td>H</td>
<td>J</td>
<td>L</td>
<td>N</td>
<td>P</td>
<td>R</td>
<td>T</td>
<td>V</td>
<td>X</td>
<td>Z1</td>
</tr>
<tr>
<td><strong>EUR Size</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>East Asia Size</strong></td>
<td>4</td>
<td>7</td>
<td>9</td>
<td>11</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
</tbody>
</table>
Thanks already for the help and best regards.
Noah
display: flex will not help you here. Also flex-grow: 1 for <tr> and <td> won't help you as they are not direct children to the .sizingchart class as <tbody> is.
Easiest solution is to remove flexbox and simply add: .sizingchart { width: 100%; }
.sizingchart {
text-align: center;
border-collapse: collapse;
white-space: nowrap;
overflow-x: auto;
width: 100%;
}
table.sizingchart td,
table.sizingchart tr {
padding: 5px 15px;
}
table.sizingchart tr:nth-child(even) {
background: #EEEEEE;
}
<table class="sizingchart">
<tbody>
<tr>
<td><strong>Length (mm)</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>US Size</strong></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td><strong>UK & AUS Size</strong></td>
<td>F</td>
<td>H</td>
<td>J</td>
<td>L</td>
<td>N</td>
<td>P</td>
<td>R</td>
<td>T</td>
<td>V</td>
<td>X</td>
<td>Z1</td>
</tr>
<tr>
<td><strong>EUR Size</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>East Asia Size</strong></td>
<td>4</td>
<td>7</td>
<td>9</td>
<td>11</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
</tbody>
</table>
Just erase display:flex (which BTW also cancels all the typical table behaviour and its semantic meaning) and add width: 100% to the table.
And I would also reduce the side padding of the cells so they can get narrower on smaller screens.
html, body {
margin: 0;
}
table.sizingchart {
text-align: center;
border-collapse: collapse;
white-space: nowrap;
overflow-x: auto;
width: 100%;
}
table.sizingchart td,
table.sizingchart tr {
padding: 5px 5px;
}
table.sizingchart tr:nth-child(even) {
background: #EEEEEE;
}
<table class="sizingchart">
<tbody>
<tr>
<td><strong>Length (mm)</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>US Size</strong></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td><strong>UK & AUS Size</strong></td>
<td>F</td>
<td>H</td>
<td>J</td>
<td>L</td>
<td>N</td>
<td>P</td>
<td>R</td>
<td>T</td>
<td>V</td>
<td>X</td>
<td>Z1</td>
</tr>
<tr>
<td><strong>EUR Size</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>East Asia Size</strong></td>
<td>4</td>
<td>7</td>
<td>9</td>
<td>11</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
</tbody>
</table>
Using the flexbox table, this is a cross-browser version. The max-width: 550px; of the table will set the width of the table. You may use pixels or a percentage for the max-width of each <td> column.
.sizingchart,
.sizingchart tr {
display: flex;
width: 100%;
max-width: 550px;
border-collapse: collapse;
text-align: center;
}
.sizingchart {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sizingchart tbody,
.sizingchart td {
display: block;
flex: 0 0 100%;
width: 100%;
}
.sizingchart td {
max-width: 6%;
padding: 5px 15px;
box-sizing: border-box;
text-align: inherit;
text-align: -webkit-match-parent;
}
.sizingchart td:first-child {
max-width: 140px;
}
.sizingchart tr:nth-child(even) {
background: #eee;
}
<table class="sizingchart">
<tbody>
<tr>
<td><strong>Length (mm)</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>US Size</strong></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td><strong>UK & AUS Size</strong></td>
<td>F</td>
<td>H</td>
<td>J</td>
<td>L</td>
<td>N</td>
<td>P</td>
<td>R</td>
<td>T</td>
<td>V</td>
<td>X</td>
<td>Z1</td>
</tr>
<tr>
<td><strong>EUR Size</strong></td>
<td>44</td>
<td>47</td>
<td>49</td>
<td>52</td>
<td>55</td>
<td>57</td>
<td>60</td>
<td>62</td>
<td>65</td>
<td>67</td>
<td>70</td>
</tr>
<tr>
<td><strong>East Asia Size</strong></td>
<td>4</td>
<td>7</td>
<td>9</td>
<td>11</td>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
</tbody>
</table>
I am trying to create a linear annual calendar with a legend below. I am doing this with table but I don't know if this the best method!
My major problem is to remove the table borders of some elements using CSS.
How can I remove the all borders from the rows that have hr ? Only one is working.
I need to have a short space between the rows in the legend.
I need to remove the Left, Top and Bottom borders of the elements with class="noborder".
#data {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
width: 1.5rem;
height: 1rem;
padding-left: 1px;
}
#data tr td {
border: 1px solid black;
}
<!-- remove borders from td with hr -->#data tbody>tr:nth-child(1)>td {
border: 0;
}
#data tbody>tr:nth-last-child(3)>td {
border: 0;
}
<!-- no borders -->.noborder {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
<table id="data">
<thead>
<tr>
<th>Month</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
</thead>
<tbody>
<!-- Seperator -->
<tr class="hr-sep">
<td colspan="23">
<hr/>
</td>
</tr>
<!-- Month data -->
<tr>
<td>January</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>February</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>March</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<!-- Seperator -->
<tr class="hr-sep">
<td colspan="23">
<hr/>
</td>
</tr>
<!-- Legend -->
<tr class="legend">
<td class="noborder"></td>
<td>L1</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td colspan="3"></td>
<td>L3</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
</tr>
<tr class="legend">
<td class="noborder"></td>
<td>L2</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
<td>L4</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
</tr>
</tbody>
</table>
Applied whatever changes were made, can you check.
How can I remove the all borders from the rows that have hr ? Only one is working.
.hr-sep > td{
border: 0 !important;
}
I need to have a short space between the rows in the legend.
<tr><td colspan="23" class="noborder"></td></tr>
I need to remove the Left, Top and Bottom borders of the elements with class="noborder".
.noborder {
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
}
#data {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
width: 1.5rem;
height: 1rem;
padding-left: 1px;
}
#data tr td {
border: 1px solid black;
}
.hr-sep > td{
border: 0 !important;
}
#data tbody>tr:nth-last-child(4)>td {
border: 0;
}
.noborder {
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
}
<table id="data">
<thead>
<tr>
<th>Month</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
</thead>
<tbody>
<!-- Seperator -->
<tr class="hr-sep">
<td colspan="23">
<hr/>
</td>
</tr>
<!-- Month data -->
<tr>
<td>January</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>February</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>March</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<!-- Seperator -->
<tr class="hr-sep">
<td colspan="23">
<hr/>
</td>
</tr>
<!-- Legend -->
<tr class="legend">
<td class="noborder"></td>
<td>L1</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td colspan="3"></td>
<td>L3</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
</tr>
<tr><td colspan="23" class="noborder"></td></tr>
<tr class="legend">
<td class="noborder"></td>
<td>L2</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
<td>L4</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
</tr>
</tbody>
</table>
I am trying to change the color of each row. I already have the external CSS file linked to the HTML file.
HTML file:
<tr><div class="row1">
<td>15</td>
<td>15</td>
<td>30</td>
</div></tr>
<tr><div class="row2">
<td>45</td>
<td>60</td>
<td>45</td>
</div></tr>
<tr><div class="row3">
<td>60</td>
<td>90</td>
<td>90</td>
</div></tr>
In my CSS I do this:
.row1{
background-color: hotpink;
}
.row2{
background-color: #ff0000;
}
.row3{
background-color: blue;
}
Use the class on the tr directly
.row1 {
background-color: hotpink;
}
.row2 {
background-color: #ff0000;
}
.row3 {
background-color: blue;
}
<table>
<tr class="row1">
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr class="row2">
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr class="row3">
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
Give the class to the <tr> tags instead:
.row1 {
background-color: hotpink;
}
.row2 {
background-color: #ff0000;
}
.row3 {
background-color: blue;
}
<table>
<tr class="row1">
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr class="row2">
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr class="row3">
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
<table>
Do not use DIVS inside tr element. Do like this:
<tr class="row1">
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr class="row2">
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr class="row3">
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
You can also try this with pseudo selector
table tr:first-child{background-color: hotpink;}
table tr:nth-child(2){background-color: #ff0000;}
table tr:nth-child(3){background-color: blue;}
<table>
<tr >
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
I'd like to make an IPA vowel diagram like this one:
I have made a table with 7 rows and 5 columns in HTML, but how do I change the shape of the table to trapezoid using CSS?
I know that it's possible to draw a trapezoid in a graphics editor and then use the resulting image as a background in HTML, but I'd like to do do this with pure CSS if possible.
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
</table>
you can use css like this to make shapes and build the table. Is dont think there i an other way to be honest.
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
next time try to show us what you DID try to get the result.
I think that the closest that you can get with CSS is using some 3d perspective:
table {
transform: translate(100px, 130px) perspective(200px) rotateX(-40deg);
transform-origin: bottom right;
transform-style: preserve-3d;
}
td,
th {
transform: rotateX(40deg);
backface-visibility: hidden;
}
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
</table>
Is there a CSS equivalent of frame=void?, or will I have to add frame=void to all the future tables I make?:
<table border=1 rules=all frame=void>
I tried googling it, and I found no results.
The old html presentational attributes are not a useful thing to use nowadays. I would discourage you from using any attributes on any elements in your body with the exceptions of class, id, data-* and things on input, audio, video or img.
To get the same effect, use
table {
border-collapse: collapse;
border-style:hidden;
}
table td {
border-width: 1px;
border-style: inset;
border-color:black;
}
As demoed here: http://jsfiddle.net/HknDE/35/
Use CSS the border property:
table { border:none; }
CSS rules will trump these old-school presentational HTML attributes. Example:
<!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" xml:lang="en" lang="en">
<head>
<title>CSS and Tables. Void frame?</title>
<style type="text/css">
table {
border:none;
}
</style>
</head>
<body>
<h2>No Frame Attribute</h2>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
<h2>Frame = "box"</h2>
<table frame="box">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
<h2>Frame = "void"</h2>
<table frame="void">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
</body>
</html>
... all three tables above render identically even though they have different values for the frame attribute.
Just set the tables border to 0px. If you want to have those inner borders, set those borders on tr and td.
table { border:0px; }
tr { border-bottom:1px; }
tr.last { border-bottom:0px; }
td { border-right:1px; }
td.last { border-right:0px; }
Or sth like that …