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
Three ways to avoid duplicate insertion of data in MySql
Preface In the case of primary key conflict or un...
How to use Xtrabackup to back up and restore MySQL
Table of contents 1. Backup 1.1 Fully prepared 1....
How to use mqtt in uniapp project
Table of contents 1. Reference plugins in the uni...
How to allow remote access to open ports in Linux
1. Modify the firewall configuration file # vi /e...
How to install MySQL and enable remote connection on cloud server Ubuntu_Server_16.04.1
1. Install MySQL: Use the following three command...
MySQL-8.0.26 Configuration Graphics Tutorial
Preface: Recently, the company project changed th...
Understanding MySQL deadlock routines through unique index S lock and X lock
In Beginners' Understanding MySQL Deadlock Pr...
Vue custom components use event modifiers to step on the pit record
Preface Today, when I was using a self-written co...
Summary of 6 Linux log viewing methods
As a backend programmer, you deal with Linux in m...
Detailed explanation of CSS3 Flex elastic layout example code
1. Basic Concepts //Any container can be specifie...
Use elasticsearch to delete index data regularly
1. Sometimes we use ES Due to limited resources o...
About debugging CSS cross-browser style bugs
The first thing to do is to pick a good browser. ...
Example of creating circular scrolling progress bar animation using CSS3
theme Today I will teach you how to create a circ...
Summary of methods for finding and deleting duplicate data in MySQL tables
Sometimes we save a lot of duplicate data in the ...
WeChat applet implements text scrolling
This article example shares the specific code for...