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
SystemC environment configuration method under Linux system
The following is the configuration method under c...
Mybatis statistics of the execution time of each SQL statement
background I am often asked about database transa...
Eclipse configures Tomcat and Tomcat has invalid port solution
Table of contents 1. Eclipse configures Tomcat 2....
Detailed deployment of docker+gitlab+gitlab-runner
environment Server: centos7 Client: window Deploy...
Install JDK8 in rpm mode on CentOS7
After CentOS 7 is successfully installed, OpenJDK...
WeChat applet implements text scrolling
This article example shares the specific code for...
How to Develop a Progressive Web App (PWA)
Table of contents Overview Require URL of the app...
Implementation of docker view container log command
Why should we read the log? For example, if the c...
A brief discussion on the font settings in web pages
Setting the font for the entire site has always b...
Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing
Table of contents Problem Description Scenario In...
JS implements the dragging and placeholder functions of elements
This blog post is about a difficulty encountered ...
mysql5.7.14 decompressed version installation graphic tutorial
MySQL is divided into Community Edition (Communit...
Solution to the problem of mysql service starting but not connecting
The mysql service is started, but the connection ...
Methods and problems encountered in installing mariadb in centos under mysql
Delete the previously installed mariadb 1. Use rp...
Differences between FLOW CHART and UI FLOW
Many concepts in UI design may seem similar in wo...