小贝子编程

如何在不更改边框的情况下更改css以显示所有表内容



我正在显示一个表，但我是css新手，想制作一个表来显示内容，在更改表中的内容时，表的边框不应该更改。我的意思是，值较少的单元格值收缩，而大单元格值扩展，我想以相同的方式查看所有内容。

你可以通过下面的屏幕截图获得更清晰的图片：

问题图像1

问题图像2

预期输出

我的表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
}
]

解决方案很简单：使用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;
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium