7

I'm trying to rewrite a site in proper HTML. The site I'm trying to replace was a complete mess. I've run into a problem where I can't get a <table> to fill the height of the <td> it's contained in. I've tried setting height: 100% on the <table>, which based on google and stackoverflow research should work, but I must be missing something stupid. I had tried to do the same thing with <divs> before switching to tables, but I'm not opposed to going back to <divs> if someone can suggest how to do it.

The content I'm developing is currently here: http://96.0.22.228/

Due to project time constraints, I've had to use bad hacks to get the pages looking correctly. I'm not declaring a <doctype> and I'm forcing IE to use IE7-quirks mode. I'd love to have recommendations on how to do this layout in a proper manner using HTML5 and CSS. It does not have to support older browsers, but it does have to look the same in the latest versions of Chrome, Firefox and IE. I'd also like to to do away with the images for the menus and style everything in CSS for the border frames and the menu text.

Even though I've had to complete the site as is, I'm open to going back and fixing it later if there's a good answer to this problem.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
TheDavidFactor
  • 1,647
  • 2
  • 19
  • 18
  • Would you mind using div's to accomplish the three column layout? That would make the hundred percent height far less tricky. – Costa Michailidis Mar 26 '12 at 04:37
  • @Costa abosolutely, however I was having other problems with the divs trying to get the flash object in the middle to line up correctly. If you could give me some suggestions as an answer, I'd be glad to try it. – TheDavidFactor Mar 26 '12 at 13:41
  • There's quite a bit of highly charged, opinionated debate that went on for some time about css layouts. Here's an example, notice the exaggerated title: http://matthewjamestaylor.com/blog/perfect-3-column.htm So, I like to invent my layouts myself, and learn what's actually happening in the rendering, and browser differences that causes problems. It's better for my own learning. Let me draft something up and submit it as an answer though to your specific challenge. I'll use a colored div with fixed size in place of the flash object. – Costa Michailidis Mar 26 '12 at 19:04
  • You might also try this: http://net.tutsplus.com/articles/news/everything-you-know-is-wrong/ – Costa Michailidis Mar 31 '12 at 02:16
  • 1
    Check this answer (td height 100% and table height 100% ) http://stackoverflow.com/questions/18488148/how-to-get-div-height-100-inside-td-of-100 – fearis Dec 05 '16 at 14:39

5 Answers5

11

100% height in a table cell is always a pain. Technically speaking a TD has no height (because that depends on its contents). What you are asking the browser to do is make the child 100% of its parent, which is 100% of its child, which is 100% of its parent ... You can see how that might be a problem.

You could try adding an explicit height to the TD and using table-layout:fixed on the table. At least that way the browser knows the height of the parent without needing the height of the child but that still may not work.

You might need to rethink how you go about this.

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • That's basically what I'm running into. I'd be glad to rethink this, but I think I've got tunnel vision from looking at it too long. Basically I need the navigation on the left to match the height of the rest of the content. So while this first page has some flash content with a specific height, other pages will be higher. I'm open to any suggestions... – TheDavidFactor Mar 26 '12 at 13:45
  • I'd suggest not matching the menu height to the content at all. All that will do is cause the buttons to change size from page to page giving you inconsistent navigation. – SpliFF Mar 26 '12 at 13:51
  • The buttons need to stay the same height, but there needs to be empty space at the bottom of the menu so the two bar outline continues for the rest of the height. here's a page from the site I'm rewriting as an example: http://www.crabcay.com/spa_resort/index.asp BTW, thanks for taking the time to discuss this. – TheDavidFactor Mar 26 '12 at 15:54
1

The best solution for this is to have the parent element of the button have a height of 100% as well, assuming you want your button to have a height of 100%.

td {
  height: 100%;
}

.btn {
  width: 100%;
  height: 100%;
}
<tr>
  <td><button class="btn" id="1">1</button></td>
  <td><button class="btn" id="2">2</button></td>
  <td><button class="btn" id="3">3</button></td>
  <td><button class="btn" id="plus">+</button></td>
  <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td>
</tr>
aaandri98
  • 585
  • 4
  • 18
Pila
  • 5,460
  • 1
  • 19
  • 30
  • 1
    This works for the simple example, but will fail if the content in any cell wraps to another line (e.g. 1 cell contains a long text string) – Nathan Mar 15 '21 at 21:53
0

you can use positions but it is not advisable as it will create problem in responsiveness some how ever Try this

 .main-table{
            width:100%;
            border-collapse:collapse;

        }
        .main-table td{
            border:1px solid black;
        }
        .main-table th{
            border:1px solid black;
        }
        .inner-table{
            border-collapse: collapse;
    width: 100%;
    height: 100%;
        }
.td-innertable{
    position:relative;
    width:40%;
}
.inner-div-table{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <table class="main-table">
        <tr>
            <th>S. No</th>
            <th> Subject</th>
            <th>Remarks</th>
            <th>Total</th>
            <th>Sports</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Maths</td>
            <td>56</td>
            <td>100</td>
            <td rowspan="7" class="td-innertable" style="background-color:pink;">
                <div class="inner-div-table">
                <table class="inner-table">
                    <tr>
                        <td>Football</td>
                        <td>A</td>
                    </tr>
                    <tr>
                        <td>Cricket</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>Tennis</td>
                        <td>A</td>
                    </tr>

                </table>
            </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Science</td>
            <td>66</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Social Science</td>
            <td>67</td>
            <td>100</td>
        </tr>
        <tr>
            <td>4</td>
            <td>German</td>
            <td>90</td>
            <td>100</td>
        </tr>
        <tr>
            <td>5</td>
            <td>History</td>
            <td>34</td>
            <td>100</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Algebra</td>
            <td>89</td>
            <td>100</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Chemistry</td>
            <td>92</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>
sumit dubey
  • 83
  • 6
0

i got a one solution if you need your desired results you can adjust the padding of your (td.navigation a class link) through this you will get your results.

apply this css:-

td.navigation a {
    color: #837768;
    display: block;
    font-size: 1.2em;
    padding: 14px 5px;
    text-align: center;
    text-decoration: none;
}
Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
0

So it's done here with divs, absolute positioning in %, and here's the part you won't like, with a specific height set in pixels. The trouble is, if you use table cells (td) the td's don't have height, and so any element inside will calculate 0 for 100% height.

When we use div's the problem is different. We can make sure they retain their height property, but there's no way to tell the div on the left, "be the same height as the div in the center." At least no way I know of. That being said, it seems like your flash object is the tallest thing, and you could easily set the height of all three div's at a pretty pixel perfect amount. Then stretch the ul navigation list to the height to 100% of the div it's nested within.

There's one other way to do this, that might meet your needs better, I'll detail it at the very bottom.

body,
html {
  background: black;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#left {
  position: absolute;
  top: 10%;
  left: 0;
  background: #eeeeee;
  width: 20%;
  padding: 2%;
  margin: 0;
}

#right {
  position: absolute;
  top: 10%;
  left: 76%;
  background: #eeeeee;
  width: 20%;
  padding: 2%;
  margin: 0;
}

#center {
  position: absolute;
  top: 10%;
  left: 24%;
  background: #dddddd;
  width: 48%;
  padding: 2%;
  margin: 0;
}

#flash {
  background: red;
  width: 500px;
  height: 500px;
  padding: 0;
  margin: 0;
}

ul {
  height: 500px;
  padding: 0;
  margin: 0;
  padding-left: 25px;
  background: #4359ac;
  color: #ffffff;
}

li {
  height: 10%;
  padding: 0;
  margin: 0;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TheDavidFactor's Layout</title>
</head>
<body>
  <div id="left">
    <ul>
      <li>Spa</li>
      <li>Hotel</li>
      <li>Activities</li>
      <li>Hobbies</li>
      <li>Night Life</li>
      <li>Food</li>
      <li>Feedback</li>
      <li>Contact</li>
      <li>About Us</li>
      <li>Copyright</li>
    </ul>
  </div>
  <div id="center">
    <div id="flash">Here's your flash Object</div>
  </div>
  <div id="right">
    here's the right div
    <br>
    <p>Let's throw some random text in here to take up space for now.</p>
  </div>
</body>
</html>

The other option you have is to wrap the three columns in a container div, and define a height for that div, then stretch each of the columns to 100% height within that container div.

aaandri98
  • 585
  • 4
  • 18
Costa Michailidis
  • 7,691
  • 15
  • 72
  • 124