Resize the width of specific table cell without affecting others

Question

I want the table column width stays at 50% but resize the highlighted row like in the picture without affecting others.

I use

white-space: nowrap;

UPDATED

I solved the problem by this.

table.border-outline tr:nth-child(2) .table-share-row-even:nth-child(2) .data-column{
    position: absolute;
    white-space: nowrap;
    right: -1px;
}

When you change the width of a table column, other column must adapt the available space. this is how html tables works. — Nithya Rajan, Feb 28 '19 at 04:39
Kindly check here https://stackoverflow.com/questions/21495634/how-to-make-a-table-with-equal-column-widths-in-css — Mina paulis, Feb 28 '19 at 04:42
Possible duplicate of [How to make a table with equal column widths in CSS?](https://stackoverflow.com/questions/21495634/how-to-make-a-table-with-equal-column-widths-in-css) — Mina paulis, Feb 28 '19 at 04:43
@minaalfy Please read the question properly, I am referring for a specific row. — kirito127, Feb 28 '19 at 04:46
You can set `table-layout: fixed;` on your table. so you can prevent the default behavour of browser — Nithya Rajan, Feb 28 '19 at 04:48
@BearNithi I already try that but the text overflow to right. — kirito127, Feb 28 '19 at 04:51
@BearNithi unfortunately I cant do that because the text should not break base on the design. It should stay inline. — kirito127, Feb 28 '19 at 04:53
@kirito127 it should stay in a single line? If so, and if you want *only one row to have variable column widths* you should not be using table layout — kukkuz, Feb 28 '19 at 05:05

score 2 · Accepted Answer · answered Feb 28 '19 at 05:27

HTML table behavior is fixed and very difficult to manipulate. You can read more about this here. This is why most people do NOT use table tags to create a table, but instead make something called a div table - a table made out of div tags. You can do what you are wanting using a div table like this:

.div-table {
    display: table;
    width: 300px;
}
.div-table-row {
    display: table-row;
    background-color: #ccc;
}
.div-table-row:nth-child(even) {
    background-color: white;
}
.div-table-col {
    float: left;
    display: table-column;
}
.div-table-col:nth-child(odd) {
    width: 20%;
}
.div-table-col:nth-child(even) {
    width: 80%;
    text-align: right;
}

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col">Share Series</div>
    <div class="div-table-col">VEON ADS (NASD)</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">Time</div>
    <div class="div-table-col">02/27/2019 16:00 (GMT-05:00)</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">Currency</div>
    <div class="div-table-col">USD</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">Market</div>
    <div class="div-table-col">NASDAQ</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">ISIN</div>
    <div class="div-table-col">US91822M1062</div>
  </div>
</div>

This is a good answer but I already solved it. I added the solution below my question. Thank you. — kirito127, Feb 28 '19 at 05:46

Resize the width of specific table cell without affecting others

1 Answers1