-7

Below is the html with embedded css code,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Embedded style</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1 style="max-width:66%;margin:auto;text-align:center;">2008 OFFICERS</h1>
        <br><br><br><br>
        <!-- Tables are surrounded with table tags -->
        <table style="border: 1px solid black;margin:auto;max-width:33%">
            <!-- thead shows at the top of the table and must come before tbody -->
            <thead style="max-width:100%">
                <tr>
                    <td colspan="3" style="font-weight:bold;text-align:center;border:1px solid black;">Current Officers</td>
                </tr>
            </thead>
            <!-- The main data for the table goes between tbody if you use thead or tfoot -->
            <tbody style="max-width:100%">
                <tr style="max-width:100%">
                    <td style="border: 1px solid black;">President</td>
                    <td style="border: 1px solid black;">Jesse Blair</td>
                    <td style="border: 1px solid black;">555-7189</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;max-width:30%">Vice-President</td>
                    <td style="border: 1px solid black;">Frank Smythe</td>
                    <td style="border: 1px solid black;">505-555-3576</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">Secretary</td>
                    <td style="border: 1px solid black;">Jean Darr</td>
                    <td style="border: 1px solid black;">555-5415</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">Treasurer</td>
                    <td style="border: 1px solid black;">Linda Carter</td>
                    <td style="border: 1px solid black;">555-9653</td>
                </tr>
            </tbody>
        </table>

        <br><br>

        <!-- Tables are surrounded with table tags -->
        <table style="border: 1px solid black;margin:auto;">
            <!-- thead shows at the top of the table and must come before tbody -->
            <thead>
                <tr>
                    <td colspan="2" style="font-weight:bold;text-align:center;border:1px solid black;">Board Members at Large</td>
                </tr>
            </thead>
            <!-- The main data for the table goes between tbody if you use thead or tfoot -->
            <tbody>
                <tr>
                    <td style="border: 1px solid black;">Dick Wilson</td>
                    <td style="border: 1px solid black;">555-1982</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">Jan-Davis</td>
                    <td style="border: 1px solid black;">555-3530</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Am using max-width with percentage values for responsive design.

Am suppose to use css properties for any code further.

How do I increase the width of the table cell?

Note: Inline css is intentionally part of exercise

overexchange
  • 15,768
  • 30
  • 152
  • 347
  • I mean, using the `max-width` property here looks meaningless because if it's specified as percentage, then it will take that % of **containing block's width**. here, you did not specify a `width` property for any element, yet you're using `max-width` attributes? – rasso Nov 19 '15 at 06:40
  • Ok, let me put it this way, how about using `` instead of `
    `? isn't that what you're looking for?
     – rasso Nov 19 '15 at 06:50
  • Also http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell and http://stackoverflow.com/questions/928849/setting-table-column-width and http://stackoverflow.com/questions/11090544/td-widths-not-working – TylerH Nov 19 '15 at 07:53

2 Answers2

0

As the name suggests, the max-width attribute describes the maximum width the element it applies to can have. If you want to change the width of an element, simply use width.

Sauhard Gupta
  • 219
  • 3
  • 10
0

you have set table width to 33% , I think this cause all the problem remove this and width to the td in percentage.

<td width="35%"   style="border: 1px solid black;">President</td>
<td width="30%"   style="border: 1px solid black;">Jesse Blair</td>
<td width="35%" style="border: 1px solid black;">555-7189</td>

set width according to your requirement or set using css class and use in code.

user2982042
  • 100
  • 7
  • What about screen re-sizing? where horizontal scroll bars come into picture on using `width` property? – overexchange Nov 19 '15 at 06:46
  • Upto my knowledge if you adjust the body size then the table will also adjust , So if we are giving the td width in percentage then it will also change and adjust in accordance with the body size. – user2982042 Nov 19 '15 at 06:51