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 …
Related
I am currently working on a class project and I am almost done, however I cannot get my calendar page to work properly. I am supposed to create each calendar month using tables, so no javascript or arrays. The calendar pages also needs to be responsive.
I already made each month as a table and I need to put these tables into 2 columns. The issue is that the columns are uneven and I attached a screenshot below to show my problem. I want January - June on the left side and July-December on the right side. I am confused on how to do this.
Each month is also supposed to have text listing important dates right next them. For example: 1st: New Years and 18:Martin Luther King Day should be next to the January table. When I try to put the text in the html code, I can never get the text to align properly. They were either below the tables or underneath them. I even tried tied putting all the text and calendar tables into one big table with four columns. I liked how it look, however I could not get this to be responsive since the table fell off the page in mobile view.
I would appreciate any help I can get.
CSS
.Calendar, th,td{
color: black;
border: 1px solid navy;
background-color: #add8e6;
border-collapse: collapse;
margin-bottom:1%;
margin-top:1%;
}
.eventDay{
background-color:red;
}
.column{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
#media screen and (max-width: 480px){
.column{
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
<div class="row">
<div class="column">
<table class="Calendar">
<tr>
<th colspan="7">January 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td><div class="eventDay">18</td></div>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">February 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td><div class="eventDay">15</td></div>
<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>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">March 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<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>
<td><div class="eventDay">26</td></div>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">April 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td><div class="eventDay">2</td></div>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<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>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">May 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<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>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td><div class="eventDay">28</td></div>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td><div class="eventDay">31</td></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">June 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></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>
<td>11</td>
<td><div class="eventDay">12</td></div>
</tr>
<tr>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</th>
<div class="column">
<table class="Calendar">
<tr>
<th colspan="7">July 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><div class="eventDay">4</td></div>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><div class="eventDay">10</td></div>
</tr>
<tr>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td><div class="eventDay">30</td></div>
<td>31</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">August 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td><div class="eventDay">7</td></div>
</tr>
<tr>
<td><div class="eventDay">8</td></div>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">September 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td><div class="eventDay">6</td></div>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td><div class="eventDay">24</td></div>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">October 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td><div class="eventDay">16</td></div>
</tr>
<tr>
<td><div class="eventDay">17</td></div>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">November 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<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><div class="eventDay">24</td></div>
<td><div class="eventDay">25</td></div>
<td><div class="eventDay">26</td></div>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">December 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td><div class="eventDay">2</td></div>
<td><div class="eventDay">3</td></div>
<td><div class="eventDay">4</td></div>
</tr>
<tr>
<td><div class="eventDay">5</td></div>
<td><div class="eventDay">6</td></div>
<td><div class="eventDay">7</td></div>
<td><div class="eventDay">8</td></div>
<td><div class="eventDay">9</td></div>
<td><div class="eventDay">10</td></div>
<td><div class="eventDay">11</td></div>
</tr>
<tr>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td><div class="eventDay">25</td></div>
</tr>
<tr>
<td><div class="eventDay">26</td></div>
<td><div class="eventDay">27</td></div>
<td><div class="eventDay">28</td></div>
<td><div class="eventDay">29</td></div>
<td><div class="eventDay">30</td></div>
<td><div class="eventDay">31</td></div>
<td></td>
</tr>
</table>
</th>
</div>
</div>
screenshot of calendar tables
This should solve your problem
.Calendar, th,td{
color: black;
border: 1px solid navy;
background-color: #add8e6;
border-collapse: collapse;
margin-bottom:1%;
margin-top:1%;
}
.div_left, div_right {
display: flex;
flex-flow: column;
}
.row_main {display: flex; justify-content: space-around;}
.eventDay{
background-color:red;
}
.column{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
display: flex;
}
#media screen and (max-width: 480px){
.column{
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.row_main { flex-flow:column;}
}
<div class="row_main">
<div class="column">
<div class="div_left">
<table class="Calendar">
<tr>
<th colspan="7">January 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td><div class="eventDay">18</td></div>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">February 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td><div class="eventDay">15</td></div>
<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>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">March 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<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>
<td><div class="eventDay">26</td></div>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">April 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td><div class="eventDay">2</td></div>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<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>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">May 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<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>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td><div class="eventDay">28</td></div>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td><div class="eventDay">31</td></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">June 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></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>
<td>11</td>
<td><div class="eventDay">12</td></div>
</tr>
<tr>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</th>
</div>
</div>
<div class="column">
<div class="div_right">
<table class="Calendar">
<tr>
<th colspan="7">July 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><div class="eventDay">4</td></div>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><div class="eventDay">10</td></div>
</tr>
<tr>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td><div class="eventDay">30</td></div>
<td>31</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">August 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td><div class="eventDay">7</td></div>
</tr>
<tr>
<td><div class="eventDay">8</td></div>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">September 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td><div class="eventDay">6</td></div>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td><div class="eventDay">24</td></div>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">October 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td><div class="eventDay">16</td></div>
</tr>
<tr>
<td><div class="eventDay">17</td></div>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">November 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<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><div class="eventDay">24</td></div>
<td><div class="eventDay">25</td></div>
<td><div class="eventDay">26</td></div>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="7">December 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td><div class="eventDay">2</td></div>
<td><div class="eventDay">3</td></div>
<td><div class="eventDay">4</td></div>
</tr>
<tr>
<td><div class="eventDay">5</td></div>
<td><div class="eventDay">6</td></div>
<td><div class="eventDay">7</td></div>
<td><div class="eventDay">8</td></div>
<td><div class="eventDay">9</td></div>
<td><div class="eventDay">10</td></div>
<td><div class="eventDay">11</td></div>
</tr>
<tr>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td><div class="eventDay">25</td></div>
</tr>
<tr>
<td><div class="eventDay">26</td></div>
<td><div class="eventDay">27</td></div>
<td><div class="eventDay">28</td></div>
<td><div class="eventDay">29</td></div>
<td><div class="eventDay">30</td></div>
<td><div class="eventDay">31</td></div>
<td></td>
</tr>
</table>
</th>
</div>
</div>
</div>
I'm trying to get a table row to split in half and stack after so many columns, but how can I do this with CSS?
I have tried to target the 12th column using td:nth-child(12), and a number of css attempts.
td:nth-child(12) { white-space: nowrap; }
<table>
<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>
<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>
</tr>
</table>
I expect to be able to target the 12th column, then put the columns 13-24 on a row with CSS only. Or at least so 13-24 behave like a new row.
You can do like that, using CSS grid
table tr {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
<table>
<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>
<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>
</tr>
</table>
you could simply use flex-box.
tr {
display: flex;
flex-wrap: wrap;
}
td {
flex: calc(100% / 13);
}
This would also work with even more columns/tds.
I've made a simply Code-Pen for you :)
https://codepen.io/anon/pen/yWYzdr
Football tournament table
I have table with multi table data which arrange under each other as you see on image under the html code, but I don't understand how to arrange (organize) table rows or table head with table date (sorry I don't know how to right say) that table data of group "A" be placed left and table date of group "B" be placed right of group "A" and same rule apply to group "D" and group "C".
I attached picture under my code for example.
Please help me to do that using only CSS, if it not difficult to explain me your solution with details.
table, th, td {
border: 1px solid #000;
}
table {
width: 50%;
border: 4px solid #f1f1f1;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table tournament</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<th>Group <span>A</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Бельгия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>15-2</td>
<td>22</td>
</tr>
<tr>
<td>2.Хорватия</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>11-5</td>
<td>17</td>
</tr>
<tr>
<td>3.Сербия</td>
<td>9</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>13-10</td>
<td>11</td>
</tr>
<tr>
<td>4.Шотландия</td>
<td>9</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>6-12</td>
<td>8</td>
</tr>
<tr>
<td>5.Македония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-10</td>
<td>6</td>
</tr>
<tr>
<td>6.Уэльс</td>
<td>8</td>
<td>2</td>
<td>0</td>
<td>6</td>
<td>7-19</td>
<td>6</td>
</tr>
<tr>
<th>Group <span>В</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Италия</td>
<td>8</td>
<td>6</td>
<td>2</td>
<td>0</td>
<td>15-5</td>
<td>20</td>
</tr>
<tr>
<td>2.Болгария</td>
<td>8</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>13-6</td>
<td>13</td>
</tr>
<tr>
<td>3.Дания</td>
<td>8</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>9-10</td>
<td>12</td>
</tr>
<tr>
<td>4.Чехия</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>8-8</td>
<td>9</td>
</tr>
<tr>
<td>5.Армения</td>
<td>8</td>
<td>3</td>
<td>0</td>
<td>5</td>
<td>8-10</td>
<td>9</td>
</tr>
<tr>
<td>6.Мальта</td>
<td>8</td>
<td>1</td>
<td>0</td>
<td>7</td>
<td>4-18</td>
<td>3</td>
</tr>
<tr>
<th>Group <span>С</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Германия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>28-7</td>
<td>22</td>
</tr>
<tr>
<td>2.Швеция</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>14-8</td>
<td>17</td>
</tr>
<tr>
<td>3.Австрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>16-8</td>
<td>14</td>
</tr>
<tr>
<td>4.Ирландия</td>
<td>8</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>13-13</td>
<td>11</td>
</tr>
<tr>
<td>5.Казахстан</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>6</td>
<td>4-17</td>
<td>4</td>
</tr>
<tr>
<td>6.Фарерские о.</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>3-25</td>
<td>0</td>
</tr>
<tr>
<th>Group <span>D</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Нидерланды</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>24-4</td>
<td>22</td>
</tr>
<tr>
<td>2.Венгрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>18-12</td>
<td>14</td>
</tr>
<tr>
<td>3.Турция</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>14-7</td>
<td>13</td>
</tr>
<tr>
<td>4.Румыния</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>13-12</td>
<td>13</td>
</tr>
<tr>
<td>5.Эстония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-16</td>
<td>7</td>
</tr>
<tr>
<td>Андорра</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>0-24</td>
<td>0</td>
</tr>
</table>
</body>
</html>
Any help would be greatly appreciated.
This image demonstrates how blocks of th with td should arranges side by side.
table, th, td {
border: 1px solid #000;
}
table {
width: 50%;
border: 4px solid #f1f1f1;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table tournament</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<th>Group <span>A</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Бельгия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>15-2</td>
<td>22</td>
</tr>
<tr>
<td>2.Хорватия</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>11-5</td>
<td>17</td>
</tr>
<tr>
<td>3.Сербия</td>
<td>9</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>13-10</td>
<td>11</td>
</tr>
<tr>
<td>4.Шотландия</td>
<td>9</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>6-12</td>
<td>8</td>
</tr>
<tr>
<td>5.Македония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-10</td>
<td>6</td>
</tr>
<tr>
<td>6.Уэльс</td>
<td>8</td>
<td>2</td>
<td>0</td>
<td>6</td>
<td>7-19</td>
<td>6</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th>Group <span>В</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Италия</td>
<td>8</td>
<td>6</td>
<td>2</td>
<td>0</td>
<td>15-5</td>
<td>20</td>
</tr>
<tr>
<td>2.Болгария</td>
<td>8</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>13-6</td>
<td>13</td>
</tr>
<tr>
<td>3.Дания</td>
<td>8</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>9-10</td>
<td>12</td>
</tr>
<tr>
<td>4.Чехия</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>8-8</td>
<td>9</td>
</tr>
<tr>
<td>5.Армения</td>
<td>8</td>
<td>3</td>
<td>0</td>
<td>5</td>
<td>8-10</td>
<td>9</td>
</tr>
<tr>
<td>6.Мальта</td>
<td>8</td>
<td>1</td>
<td>0</td>
<td>7</td>
<td>4-18</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<th>Group <span>С</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Германия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>28-7</td>
<td>22</td>
</tr>
<tr>
<td>2.Швеция</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>14-8</td>
<td>17</td>
</tr>
<tr>
<td>3.Австрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>16-8</td>
<td>14</td>
</tr>
<tr>
<td>4.Ирландия</td>
<td>8</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>13-13</td>
<td>11</td>
</tr>
<tr>
<td>5.Казахстан</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>6</td>
<td>4-17</td>
<td>4</td>
</tr>
<tr>
<td>6.Фарерские о.</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>3-25</td>
<td>0</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th>Group <span>D</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Нидерланды</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>24-4</td>
<td>22</td>
</tr>
<tr>
<td>2.Венгрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>18-12</td>
<td>14</td>
</tr>
<tr>
<td>3.Турция</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>14-7</td>
<td>13</td>
</tr>
<tr>
<td>4.Румыния</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>13-12</td>
<td>13</td>
</tr>
<tr>
<td>5.Эстония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-16</td>
<td>7</td>
</tr>
<tr>
<td>Андорра</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>0-24</td>
<td>0</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am writing a PHP script that is dynamically creating a HTML table.
There are two things that are missing and cannot find info on.
I'd like to reduce the "padding" of the rowspan cell, it is much too large horizontally. What can you use to modify the spacing between the string inside and the end of the cell?
I would also like to start the rowspan from the 3 row up to the last one, and start the colspan from column 3 up to the last one. Can this be done?
HTML source code if you wish to see what the table looks like:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:50%">
<tr>
<th colspan="17">Weight, in Kg</th>
</tr>
<tr>
<th rowspan="11">Height, in cm</th>
</tr>
<tr>
<th></th>
<th>40</th>
<th>45</th>
<th>50</th>
<th>55</th>
<th>60</th>
<th>65</th>
<th>70</th>
<th>75</th>
<th>80</th>
<th>85</th>
<th>90</th>
<th>95</th>
<th>100</th>
<th>105</th>
<th>110</th>
</tr>
<tr>
<th>160</th>
<td>15</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>35</td>
<td>37</td>
<td>39</td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<th>165</th>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
</tr>
<tr>
<th>170</th>
<td>13</td>
<td>15</td>
<td>17</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<th>175</th>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<th>180</th>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<th>185</th>
<td>11</td>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
</tr>
<tr>
<th>190</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<th>195</th>
<td>10</td>
<td>11</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<th>200</th>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
Create a 2x2 "filler" cell. Then start the column label cell one <tr> later. You basically have two header rows running horizontally, hence starting the vertical header row in the third <tr>.
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:50%">
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="17">Weight, in Kg</th>
</tr>
<tr>
<th>40</th>
<th>45</th>
<th>50</th>
<th>55</th>
<th>60</th>
<th>65</th>
<th>70</th>
<th>75</th>
<th>80</th>
<th>85</th>
<th>90</th>
<th>95</th>
<th>100</th>
<th>105</th>
<th>110</th>
</tr>
<tr>
<th rowspan="11">Height, in cm</th>
<th>160</th>
<td>15</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>35</td>
<td>37</td>
<td>39</td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<th>165</th>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
</tr>
<tr>
<th>170</th>
<td>13</td>
<td>15</td>
<td>17</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<th>175</th>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<th>180</th>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<th>185</th>
<td>11</td>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
</tr>
<tr>
<th>190</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<th>195</th>
<td>10</td>
<td>11</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<th>200</th>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
When you say "padding" I'm understanding it as the white space on either side of Wight, in Kg to the border of the cell. If that's the case:
Increase the font size, which might look ugly.
Increase letter spacing, letter-spacing: 0.25em;, which might look ugly.
If you're talking about the white space after the numbers in the 100, 105 and 110 columns you can do above but I'd suggest having all the columns be the same width and then centering all the numbers to even everything out.
Note that there's less white space for triple digits than double digits with this approach.
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th,
td {
min-width: 1.85rem;
}
<table style="width:50%">
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="17">Weight, in Kg</th>
</tr>
<tr>
<th>40</th>
<th>45</th>
<th>50</th>
<th>55</th>
<th>60</th>
<th>65</th>
<th>70</th>
<th>75</th>
<th>80</th>
<th>85</th>
<th>90</th>
<th>95</th>
<th>100</th>
<th>105</th>
<th>110</th>
</tr>
<tr>
<th rowspan="11">Height, in cm</th>
<th>160</th>
<td>15</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>35</td>
<td>37</td>
<td>39</td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<th>165</th>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
</tr>
<tr>
<th>170</th>
<td>13</td>
<td>15</td>
<td>17</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<th>175</th>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<th>180</th>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<th>185</th>
<td>11</td>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
</tr>
<tr>
<th>190</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<th>195</th>
<td>10</td>
<td>11</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<th>200</th>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
Or you could set a specific amount of padding on columns and center. I personally like the result of the code snippet above. Here you get consistent white space around then numbers while sacrificing equal column width.
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th,
td {
padding: 0.125rem 0.25rem;
}
<table style="width:50%">
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="17">Weight, in Kg</th>
</tr>
<tr>
<th>40</th>
<th>45</th>
<th>50</th>
<th>55</th>
<th>60</th>
<th>65</th>
<th>70</th>
<th>75</th>
<th>80</th>
<th>85</th>
<th>90</th>
<th>95</th>
<th>100</th>
<th>105</th>
<th>110</th>
</tr>
<tr>
<th rowspan="11">Height, in cm</th>
<th>160</th>
<td>15</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>35</td>
<td>37</td>
<td>39</td>
<td>41</td>
<td>42</td>
</tr>
<tr>
<th>165</th>
<td>14</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>33</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
</tr>
<tr>
<th>170</th>
<td>13</td>
<td>15</td>
<td>17</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>25</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<th>175</th>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>31</td>
<td>32</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<th>180</th>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
<td>33</td>
</tr>
<tr>
<th>185</th>
<td>11</td>
<td>13</td>
<td>14</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
<td>32</td>
</tr>
<tr>
<th>190</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<th>195</th>
<td>10</td>
<td>11</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<th>200</th>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
If neither of those are what you're referencing, please clarify.
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>