Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Limit width of HTML table

I'm trying to write a table so that it doesn't expand to the full width of the page. Below is what I have so far, but even though the first columns seem to respect the "width" parameter, the last column expands to the end of the page.

All results I found use CSS, but I am not sure how to do that. I don't know if it's relevant, but I'm writing a Joomla! article.

<table class="zebra" width="300">
  <thead>
    <tr>
      <th style="text-align: left;" width="100">title 1</th>
      <th style="text-align: center;" width="100">title 2</th>
      <th style="text-align: center;" width="100">title 3</th></tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td style="text-align: left;" width="100">content 1</td>
      <td style="text-align: center;" width="100">content 2</td>
     <td style="text-align: center;" width="100">content 3</td>
    </tr>
  </tbody>
</table>
like image 345
iomartin Avatar asked Oct 09 '12 14:10

iomartin


People also ask

How do I restrict table width in HTML?

To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.

How do I change the width of a data table in HTML?

Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.


1 Answers

<table class="zebra" style="max-width:300px;">
like image 199
PhonicUK Avatar answered Oct 18 '22 04:10

PhonicUK