CODEWITHSUNDEEP
htmlcss
Pedro Lino
Pedro Lino

Reputation: 601

Make a table with different dimensions with divs

I want to display 5 rating elements on DLE in 4 cells. This is what I have right now:

<table width=100%>
<tr>    
   <td width=10%>
   <div class="custom-data"> Score IMDB</div>
   </td>
   <td>
        <div class="custom-data">Score Users</div>
        <div class="custom-data">Stars</div>
   </td>  
</tr>

<tr>
   <td>IMDB</td>
   <td>Users</td>
</tr>

</table>

This should look like

Score IMDB | Score Users *****
   IMDB    |   Users

I have width defined in the first column. I want to make a border in the middle to separate the scores, but I can't do it with the table right?

The ul li tags mess up the stars. My only way is to do a div.

Can you help me with the code to make this structure?

Upvotes: 1

Views: 171

Answers (1)

display-name-is-missing
display-name-is-missing

Reputation: 4409

How about this:

HTML

<div class="left">Score IMDB</div><div class="right">Score Users *****</div>
<div style="clear:both;"></div>
<div class="left">IMDB</div><div class="right">Users</div>

CSS

.left, .right { display:inline-block; margin:5px 0; }
.left { border-right:1px solid #000; width:90px; padding:4px; }
.right { padding:4px 4px 4px 10px; }

The 'magic' here really lies in display:inline-block, which allows us to put divs next to each other. Hope this helps!

DEMO.

Note

Since you wanted the right second column to have dynamic width, the effect of centered text (like you have in the description of what you wanted), will not be visible on the right column. If you still wish that effect on the left column, add this code to .left:

text-align:center;

Upvotes: 1

Related Questions