Clever Geek Handbook

Split table element <td> into LEFT and RIGHT

What is the best way to split a table element <td>

? I really don't want to use nested tables. I need the inner element to have two elements, one of which remains justified and the other correct, without borders.

For example:

<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>

any other ways to do this besides the following?

<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>

I want an inner element to be <span>

or is best for this.

+3


source to share


4 answers 


<table>
   <tr>
      <td>
         <div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
      </td>
   </tr>
</table>


+5


source


I would do something like:

<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>

then my css will resemble:



td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}

... or something like that.

+1


source


You can do it like this, although spans and divs are much better imo.

<table width="100%">
 <tr width="100%">
  <td width="100%">
   <span style="float:left;">left</span>
   <span style="float:right;">right</span>
  </td>
 </tr>
</table>
+1


source


The floats didn't seem to look right, so I used flexbox:

https://jsfiddle.net/6rc8w709/

.td-content{
  display:flex;
}
.child{
  flex:1;
}
.right{
  text-align:right;
}

HTML:

<table>
  <tr>
    <td>
      <div class="td-content">
        <div class="child">
          LEFT
        </div>
        <div class="child right">
          RIGHT
        </div>
      </div>
    </td>
  </tr>
</table>
0


source






More articles:


All Articles