CODEWITHSUNDEEP
htmlcssangular
Amruta
Amruta

Reputation: 1575

Setting width for columns in a table when the number of columns is variable

I am working on an angular 8 project at work. I have a page which has a View Only mode and an Edit mode. This page has a table which displays a certain type of records. I am supposed to add a column of checkboxes as the first column in the table when Edit mode is enabled. As per the current code the width of each column was set like below

.data-table tr th:nth-child(1) {
  width: 20%;
}
.data-table tr th:nth-child(2) {
  width: 10%;
}
.data-table tr th:nth-child(3) {
  width: 16%;
}
.data-table tr th:nth-child(4) {
  width: 18%;
}
.data-table tr th:nth-child(5) {
  width: 18%;
}
.data-table tr th:nth-child(6) {
  width: 15%;
}
.data-table tr th:nth-child(7) {
  width: 5%;
}

So when my checkboxes appear in Edit mode, the formatting gets messed up, because now each existing column is pushed ahead by a place and gets assigned wrong width. Other than adding id for each th tag and then specifying the css for each, I can't think of anything else. Please suggest any other possible way to do this.

Upvotes: 0

Views: 1165

Answers (3)

Martin
Martin

Reputation: 22760

From My Comment

Add the EDIT column so it always exists but then hide that column with CSS display:none; when not on the edit page.

View Page:

<table class='without-edit'> 
    <tr>
      <td>Edit</td>
      <td>Hosehead</td>
      <td>Trapdoor</td>
      <td>Tartarse</td>
      <td>Flippant</td>
      <td>Crappery</td>
      <td>Scottish</td>
      <td>Dorkeley</td>
</tr>
</table>

Edit Page:

<table class='with-edit'> 
    <tr>
      <td>Edit</td>
      <td>Hosehead</td>
      <td>Trapdoor</td>
      <td>Tartarse</td>
      <td>Flippant</td>
      <td>Crappery</td>
      <td>Scottish</td>
      <td>Dorkeley</td>
</tr>
</table>

CSS:

.without-edit tr td:first-of-type {
     display:none;
}

Upvotes: 1

JMP
JMP

Reputation: 1934

You could add the Edit column header as td instead of th then skip td by changing your css to nth-of-type:

<td>Edit</td><th>Col 1</th>

css:

   .data-table tr th:nth-of-type(1) {
  width: 20%;
  }
  .data-table tr th:nth-of-type(2) {
  width: 10%;
  }

Then amend your css to add header styles to that td also if needed.

Upvotes: 1

Rama Krishna
Rama Krishna

Reputation: 665

Instead of setting width from scss file use attribute binding like below

<th [style.width]="percentage + '%'"></th>

here percentage may be a number depending on your edit condition

or else try like this

add a class to your table by using ngClass directive like 

<table [ngClass]="{ 'with-edit': isEdit , 'without-edit': !isEdit  }"></table>

.data-table .with-edit tr th:nth-child(1) {
  width: 20%;
}
.data-table .with-edit tr th:nth-child(2) {
  width: 10%;
}
.data-table .with-edit tr th:nth-child(3) {
  width: 16%;
}
.data-table .with-edit tr th:nth-child(4) {
  width: 18%;
}
.data-table .with-edit tr th:nth-child(5) {
  width: 18%;
}
.data-table .with-edit tr th:nth-child(6) {
  width: 15%;
}
.data-table .with-edit tr th:nth-child(7) {
  width: 5%;
}


.data-table .without-edit tr th:nth-child(1) {
  width: 20%;
}
.data-table .without-edit tr th:nth-child(2) {
  width: 10%;
}
.data-table .without-edit tr th:nth-child(3) {
  width: 16%;
}
.data-table .without-edit tr th:nth-child(4) {
  width: 18%;
}
.data-table .without-edit tr th:nth-child(5) {
  width: 18%;
}
.data-table .without-edit tr th:nth-child(6) {
  width: 15%;
}
.data-table .without-edit tr th:nth-child(7) {
  width: 5%;
}

Upvotes: 1

Related Questions