How to set the width of table (table) in css

In web page layout design, tables are often used to arrange data. When using tables, in order to ensure the beauty and readability of the page, we need to set the width of the table. The following will introduce how to use CSS to set the width of a table (table).

1. Use the width attribute in CSS

There is a width attribute in CSS that can be used to set the width of an element. In the table, we can also use this property to set the width of the table. The specific method is as follows:

1. In the CSS style sheet, use the "table" selector to select the table element;
2. Use the width attribute to specify a width value for the table (can be pixels or percentage).

For example, the following code sets the width of the table to 400 pixels:

<table style="width: 400px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

In the above code, we set the "width" attribute of the table element to "400px", This limits the width of the entire table to 400 pixels. Even if the content in the table exceeds 400 pixels, the table will not be stretched and scroll bars will be displayed.

If we set the width attribute to a percentage value, the width of the table will be proportional to the width of the parent element. For example, the following code sets the width of the table to 50% of the width of the parent element:

<div>
  <table style="width: 50%;">
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</div>

In the above code, we set the "width" attribute of the table element to "50%" so that the width of the table It will automatically adapt to the width of its parent element, giving it a better responsive design effect.

2. Use the min-width attribute and max-width attribute in CSS

In addition to using the width attribute to set the table width, we can also use the min-width attribute and max in CSS -width attribute to set the minimum and maximum width for the table. The usage of these properties is similar to the width property, you just need to change the property name accordingly.

For example, we can set a minimum width value for the table to prevent the table from being too small and affecting the layout. The following is an example:

<table style="min-width: 200px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

In the above code, we set the "min-width" attribute of the table element to "200px", so that even if there is little content in the table, the width of the table will not Less than 200 pixels.

Similarly, we can also set a maximum width value for the table to prevent the table from being too large and affecting the page layout. The following is an example:

<table style="max-width: 800px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

In the above code, we set the "max-width" attribute of the table element to "800px", so that even if there is a lot of content in the table, the width of the table will not exceed 800 pixels.

Summary:

The above are several methods for setting the width of table (table) using CSS. In actual website applications, we need to choose the appropriate width setting method according to the actual situation to achieve the best page effect.

The above is the detailed content of How to set the width of table (table) in css. For more information, please follow other related articles on the PHP Chinese website!