如何更改CSS以显示所有表格内容而不更改边框？

时间：2020-04-10 05:47:13

标签： css html-table width

我正在显示一个表，但是我是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 个答案:

答案 0 :(得分：0)

解决方案很简单：使用width: auto或使用overflow。 要阻止文本进入新行，请在white-space: nowrap;旁使用width: auto;。

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;
}
相关问题
最新问题