如何在不更改边框的情况下进行css更改以显示所有表格内容？
Posted
技术标签:
【中文标题】如何在不更改边框的情况下进行css更改以显示所有表格内容？【英文标题】：How to make css changes to display all table content without changing the border? 【发布时间】：2020-07-22 20:54:46 【问题描述】：我正在显示一个表格，但我是 css 的新手，想要制作一个表格来显示内容，并且在更改表格中的内容时，表格的边框不应该改变我的意思是具有较少值的单元格值收缩和较大的单元格值展开，我想以相同的方式查看所有内容。
您可以通过下面的屏幕截图获得更清晰的图片：
Problem Image 1
Problem Image 2
Expected output
我的表格 CSS 代码：
/*Table CSS*/
table
/*width: 100%;*/
table-layout: fixed;
table thead th
background-color: #808080;
color: #fff;
padding: 0.2rem;
border: 1px solid #ddd;
text-align: center;
/*width: 100%;*/
table tbody td
padding: 0.4rem;
border: 1px solid #ddd;
text-align: left;
table-layout: fixed;
/*width: 100%;*/
tr:hover background-color: #f5f5f5;
tr:nth-child(even)background-color: #f2f2f2;
以下是我用来显示的 JSON 数据。
[
"Lead_Id": "1505",
"FirstName": "Alex",
"LastName": "Nagorniy",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Associate",
"Linkedin": "",
"Email": "anagorniy@nutter.com",
"Phone": "(617) 439-2317",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1518",
"FirstName": "Andrew",
"LastName": "Rejent",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Associate",
"Linkedin": "",
"Email": "arejent@nutter.com",
"Phone": "(617) 439-2409",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1358",
"FirstName": "Bernard",
"LastName": "Nutt",
"Company": "Pizzeys",
"Website": "https://www.pizzeys.com.au",
"Designation": "Principal",
"Linkedin": "",
"Email": "bnutt@pizzeys.com.au",
"Phone": "61 (2) 6285 3111",
"City": "Canberra",
"State": "Australian Capital Territory",
"Country": "Australia",
"TechArea": "",
"FirmType": "",
"FirmSize": "Between 11 and 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1573",
"FirstName": "David",
"LastName": "Powsner",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Partner",
"Linkedin": "",
"Email": "dpowsner@nutter.com",
"Phone": "(617) 439-2717",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1576",
"FirstName": "Derek",
"LastName": "Roller",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Partner",
"Linkedin": "",
"Email": "droller@nutter.com",
"Phone": "(617) 439-2371",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1583",
"FirstName": "Emmanuel",
"LastName": "Filandrianos",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Associate",
"Linkedin": "",
"Email": "efilandrianos@nutter.com",
"Phone": "(617) 439-2136",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1619",
"FirstName": "Jeffrey",
"LastName": "Klayman",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Partner",
"Linkedin": "",
"Email": "jklayman@nutter.com",
"Phone": "(617) 439-2318",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1645",
"FirstName": "Kathleen",
"LastName": "Williams",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Co-chairman",
"Linkedin": "",
"Email": "kwilliams@nutter.com",
"Phone": "(617) 439-2294",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1673",
"FirstName": "Liza",
"LastName": "Hadley",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Associate",
"Linkedin": "",
"Email": "lhadley@nutter.com",
"Phone": "(617) 439-2056",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1691",
"FirstName": "Micah",
"LastName": "Miller",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Associate",
"Linkedin": "",
"Email": "mmiller@nutter.com",
"Phone": "(617) 439-2151",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1748",
"FirstName": "Ronald",
"LastName": "Cahill",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Co-chairman",
"Linkedin": "",
"Email": "rcahill@nutter.com",
"Phone": "(617) 439-2782",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1749",
"FirstName": "Rory",
"LastName": "Pheiffer",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Deputy Chairman",
"Linkedin": "",
"Email": "rpheiffer@nutter.com",
"Phone": "(617) 439-2879",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
,
"Lead_Id": "1768",
"FirstName": "Steven",
"LastName": "Saunders",
"Company": "Nutter McClennen & Fish LLP",
"Website": "https://www.nutter.com/",
"Designation": "Co-chairman",
"Linkedin": "",
"Email": "ssaunders@nutter.com",
"Phone": "(617) 439-2121",
"City": "Boston",
"State": "Massachusetts",
"Country": "USA",
"TechArea": "",
"FirmType": "",
"FirmSize": "More than 20",
"LastContactDate": "1970-01-01",
"NextContactDate": "1970-01-01",
"LeadDescription": "",
"OwnerNotes": "",
"SetReminder": "1970-01-01",
"AdminNotes": "",
"LeadStatus": "",
"LeadAddedBy": "32",
"LeadAddedOn": "2020-04-01 20:14:52",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
]
【问题讨论】：
【参考方案1】：解决方案很简单：使用width: auto 或使用overflow。
要阻止文本换行，请在 width: auto; 旁边使用 white-space: nowrap;。
table tbody td
padding: 0.4rem;
border: 1px solid #ddd;
text-align: left;
table-layout: fixed;
/* Automatic Width */
width: auto;
/* Hide Overflowing Text */
overflow: hidden;
/* Scroll to See Overflowing Text */
overflow: scroll;
/* Remove New Lines */
white-space: nowrap;
【讨论】：
那么随着单元格内容长度的变化而变化的表格边框呢？ 您为您的问题添加了更多细节，所以我更改了答案 你需要的是width: auto;。
也请看我的预期输出和问题截图
@RinkuYadav 我看过你的截图。以上是关于如何在不更改边框的情况下进行css更改以显示所有表格内容？的主要内容，如果未能解决你的问题，请参考以下文章
在不更改边框颜色的情况下更改 GridView 单元格中的文本颜色