td width problem when td cells are merged
|
In the following example, when the width of the td containing the name is 60px, if there are fewer words in the second line, the display is normal, but if there are more words in the second line, the display is abnormal. Copy code The code is as follows:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>123WORDPRESS.COM</title> <style type="text/css"> .mTable{width:200px;border:1px solid #666;border-collapse:collapse} .mTable td{border:1px solid #666} </style> </head> <body> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">Name:</td> <td>Someone</td> </tr> <tr> <td colspan="2">Personal Profile</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">Name:</td> <td>Someone</td> </tr> <tr> <td colspan="2">Personal Profile Personal Profile Personal Profile</td> </tr> </table> </body> </html> Solution 1: (Also set the width of the second column td) Copy code The code is as follows:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>123WORDPRESS.COM</title> <style type="text/css"> .mTable{width:200px;border:1px solid #666;border-collapse:collapse} .mTable td{border:1px solid #666} </style> </head> <body> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">Name:</td> <td width="140">Someone</td> </tr> <tr> <td colspan="2">Personal Profile</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">Name:</td> <td width="140">Someone</td> </tr> <tr> <td colspan="2">Personal Profile Personal Profile Personal Profile</td> </tr> </table> </body> </html> Solution 2: (Set table-layout:fixed) Copy code The code is as follows:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>123WORDPRESS.COM</title> <style type="text/css"> .mTable{width:200px;border:1px solid #666;border-collapse:collapse;table-layout:fixed} .mTable td{border:1px solid #666} </style> </head> <body> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">Name:</td> <td>Someone</td> </tr> <tr> <td colspan="2">Personal Profile</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">Name:</td> <td>Someone</td> </tr> <tr> <td colspan="2">Personal Profile Personal Profile Personal Profile</td> </tr> </table> </body> </html> |
<<: Web design and production test questions and reference answers
>>: An example of how to write a big sun weather icon in pure CSS
Recommend
A brief discussion on the issue of dates containing zero values in MySQL database
By default, MySQL can accept the insertion of 0 v...
Detailed explanation of Nginx Location configuration (Location matching order)
Location means "positioning", which is ...
jQuery realizes the shuttle box function
This article example shares the specific code of ...
Detailed explanation of mysql permissions and indexes
mysql permissions and indexes The highest user of...
Let's talk in detail about how the NodeJS process exits
Table of contents Preface Active withdrawal Excep...
A brief discussion on the types of node.js middleware
Table of contents Overview 1. Application-level m...
CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)
Note 1: Solve the problem of slow connection to M...
CentOS7 uses rpm to install MySQL 5.7 tutorial diagram
1. Download 4 rpm packages mysql-community-client...
In-depth understanding of Vue-cli4 routing configuration
Table of contents Preface - Vue Routing 1. The mo...
Docker connects to the host Mysql operation
Today, the company project needs to configure doc...
Detailed explanation of Linux one-line command to process batch files
Preface The best method may not be the one you ca...
Specific use of nginx keepalive
The default request header of the http1.1 protoco...
How to create a MySQL database (de1) using commands
1. Connect to MYSQL Format: mysql -h host address...
Simple implementation of mini-vue rendering
Table of contents Preface Target first step: Step...
Detailed steps for building, running, publishing, and obtaining a Docker image for the first time
1. Introduction In the past, if you wanted to sta...