CODEWITHSUNDEEP
html
Justin Yoder
Justin Yoder

Reputation: 537

Creating tables with different sized cells

I want to make my form to look neat and I want my cells to be different sizes depending on the information in the cell. How do I make a cell width different then the one above it?

OK now i also want to know how to make 1 cell tall and have a lot of small cells to the right of it.

Example:

  <html>
  <table border="1"><td width="50">some info</td><td width="50">some more info</td>
  <tr>
  <td width="250">Lots more text and information in this box then the first cell</td><td>     other information</td>

I don't want the first cell in the first row to automatically resize to the length of the first cell in the second row.

Example:

|some info|some more info|

|Lots more text and information in this box then the first cell|other information|

or is there at least another way to lay this out that would look clean?

Upvotes: 2

Views: 28102

Answers (2)

Blazemonger
Blazemonger

Reputation: 93003

Try this -- use DIVs to simulate table rows and columns, and the CSS min-width property to create "cells" that can stretch as needed.

http://jsfiddle.net/HN4YS/1/

html:

<div class="row"><div class="col1">some info</div><div class="col2">some more info</div></div>
<div class="row"><div class="col1">Lots more text and information in this box then the first cell</div><div class="col2">other information</div></div>

css:

.col1, .col2 {
    display: inline-block;
    min-width: 150px;
    border: 1px solid;
    padding: 4px;
}
.row {
    white-space: nowrap;
}

Upvotes: 1

Nikita
Nikita

Reputation: 106

All column in table always have similar width (you can't change it), you can only add one more cell and span some amount of cells in second row.

  <html>   
       <table border="1">
       <tr>
           <td width="50">some info</td>
           <td width="50">some more info</td>
           <td></td>
           <td></td>
       </tr>   
       <tr>
           <td width="250" colspan="3">Lots more text and information in this box then the first cell</td>
           <td>     other information</td>

Upvotes: 4

Related Questions