TnT Mark TnT Mark - 6 months ago 9
HTML Question

Change position on td in table

I am making website for my school and I am stuck in a table lol :/. I am making schedule and I want to add buttons for Friday and Sunday and I am making it in table for better items layer :D . This is my code and can I make it like this: http://prntscr.com/b2s8oa

Now its like this: http://prntscr.com/b2s8wx

Code:

<div class="rasporedden">
<table>
<tr>
<td>
<img src="sliki/levostrelka.png" class="rasporedstrelka">
</td>
<td>
Понеделник
</td>

<td>
Вторник
</td>
<td>
<img src="sliki/desnostrelka.png" class="rasporedstrelka">
</td>
</tr>
</table>
</div>

Answer

Using CSS, give the first and last cells a width equal to the width of the image they contain by using the :first-child and :last-child pseudo-classes. Doing so should force the rest of the cells to dynamically fill the remaining space.

Here's a quick example:

*{box-sizing:border-box;font-family:sans-serif;}
table{
  border:1px solid #000;
  width:100%
}
td:first-child,td:last-child{
  background:#ddd;
  text-align:center;
  width:20px;
}
<table>
  <tr>
    <td>«</td>
    <td>Lorem ipsum</td>
    <td>dolor sit amet</td>
    <td>»</td>
  </tr>
</table>

Having said that, though, unless a table makes semantic sense for the data you are presenting, it's not the best option for laying out content.

Comments