Как внести изменения css для отображения всего содержимого таблицы без изменения границы? - PullRequest
Новая
       52

Как внести изменения css для отображения всего содержимого таблицы без изменения границы?

1 голос
/ 10 апреля 2020

Я отображаю таблицу, но я новичок в 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
  }
]

1 Ответ

0 голосов
/ 10 апреля 2020

Решение простое: используйте 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;
}
...