Get the App
SLTechnology News&Howtos  ›  Development  › 

How to define and set the td width of css

Shulou Source: shulou.com Published: 2022-06-01 07:48:34 10月03日 Update

This article mainly introduces the relevant knowledge of "how to define and set the td width of css". Xiaobian shows you the operation process through actual cases. The operation method is simple and fast and practical. I hope this article "how to define and set the td width of css" can help you solve the problem.

css td width control definition and settings

Use CSS to set width style method for html table td, first of all we know that the width style word is "width", usually set width for td, usually set width for a group of multiple groups of tags, or set different width for each td tag in multiple pairs, then we need to add a class or id selector to td (how to choose class and id) There are many differences We will create several new classes or ids to distinguish it from other td tags of the same class.

Examples are as follows:

If the total width of the table is 300, and the three pairs of widths are conveniently 100px,150px, and 200px, then we need to create three new class selectors named differently. The CSS code is as follows:

.- td-1{width:100px} .- td-2{width:150px} .- td-3{width:200px}

The HTML source code is as follows:

Width of 100px I am 150px wide I am 200px wide.

Screenshot of effect:

The above use css set td width method and case, hope to help you.

Expand understanding, directly set the width of the html td tag, we can directly add the width attribute to the td tag, html source code is as follows:

Width of 100px I am 150px wide I am 200px wide.

Screenshot of effect

direct td tag setting width and value

Note that the width attribute is set directly in the td tag, and its value does not need to be added to the page length unit.

About "how to define and set the td width of css" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Tags: Width label different method knowledge selection attribute screenshot effect style case source code industry help practical three code content unit word Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Xiaomi Apple OPPO Reno Huawei Redmi