Adjust column width to content, only one column will extend to table width

2022-01-19 16:33 nowox imported from Stackoverflow

I would like to format a table in HTML/CSS according to these rules:

Some columns have a minimum width
Some columns will have width adjusted to the content
One column will adjust its width to the remaining width

In the following example I have two issues:

If the quantity is bigger than the allowed width, it will overflow
The Reference column is not adjusted to the content

How can I fix this?

.content {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 1000px;
    border: 1px solid black;
}

table {
    position: absolute;
    width: auto;
    line-height: 1.254;
    border-collapse: collapse;
}

tr>th {
    padding-left: 1mm;
    padding-right: 1mm;
    padding-bottom: 0.5mm;
}

tr>td {
    padding-left: 1mm;
    padding-right: 1mm;
    padding-bottom: 0.5mm;
    font-size: 80%;
}

tr th:nth-child(1) {
    border-right: solid 0.5px black;
}

tr th:nth-child(3) {
    border-left: solid 0.5px black;
}

tr th:nth-child(4) {
    text-align: right;
    border-left: solid 0.5px black;
}

tr th:nth-child(5) {
    text-align: right;
    border-left: solid 0.5px black;
}

tr td:nth-child(1) {
    width: 6mm;
    border-right: solid 0.5px black;
}

tr td:nth-child(2) {
    text-align: left;
}

tr td:nth-child(3) {
    border-left: solid 0.5px black;
}

tr td:nth-child(4) {
    width: 8mm;
    text-align: right;
    border-left: solid 0.5px black;
}

tr td:nth-child(5) {
    text-align: right;
    width: 15mm;
    border-left: solid 0.5px black;
}

<html>
<body>
    <div>
        <table class="content">
            <tr>
                <th>Pos.</th>
                <th>Description</th>
                <th>Reference</th>
                <th>Qty.</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>1</td>
                <td>IC GATE NAND 4CH 2-INP 14DIP CD74HCT00E</td>
                <td>1514-2N2222APBFREE-ND</td>
                <td>20</td>
                <td>40.95</td>
            </tr>
        </table>
    </div>
</body>
</html>

See also questions close to this topic

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Javascript: Change element class if button has a certain value
```
        <div class="main-div main-div2"> 
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>
```
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

Thank you.

Boostrap vertical sizing with different style width and height

I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

Anyway is there any way how to resize bootstrap icons except display-1???

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

how to add a table row that have different size and display compare to other row

in this excercise, i create a table with 5 row in tr and i put the last row (1 input and 2 button) in a div class btn. the display of last row is ok but i expect to have the table border wrap the last row as well (i dont set last row as tr and td cause it will change the size of the row above). the table border already wrap the 5 row above but i need it to also wrap around the last row and im not sure whether the last row need to be put in tr and td (because its content is different from other row). please someone give a solution

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex, .quantity, .close_cell, .content {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
  border: 1px solid #dfe5e8;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}
section .detail .head {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 16px;
  background: #b6c6c9;
}
section .detail .row {
  padding: 20px 0;
}
section .detail .row .close_btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  background: red;
  display: inline-block;
  text-align: center;
}
section .detail .row .close_btn:hover {
  cursor: pointer;
}
section .detail .row .square {
  display: inline-block;
  width: 62px;
  height: 62px;
  background: #99a9b5;
}
section .detail .row .square:hover {
  cursor: pointer;
}
section .detail .row .text {
  display: inline-block;
  text-transform: capitalize;
}
section .detail .row .text .blue {
  margin-left: 25px;
  color: #00bcd4;
}
section .detail .row .text .grey {
  margin-left: 18px;
  color: #cfd7dc;
  font-size: 14px;
}

.content {
  padding: 20px 0;
}

.product_col {
  width: 590px;
}

.close_cell {
  padding: 0 36px;
  justify-content: center;
}

.product {
  padding: 22px 0;
}

.quantity {
  width: 106px;
  border: 1px solid #dfe5e8;
}
.quantity span {
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.price {
  font-size: 20px;
  color: #393d50;
}

.price_col {
  width: 160px;
}

.quantity_col {
  width: 202px;
}

.total {
  font-size: 24px;
  color: #393d50;
}

.total_col {
  width: 183px;
}

td,
th {
  text-align: left;
}

tr:nth-child(even) {
  background: #f0f3f2;
}

.btn {
  padding: 24px;
}
.btn input {
  width: 260px;
  height: 52px;
  text-transform: capitalize;
  padding: 0 24px;
  border: 1px solid #dfe5e8;
  background: #f5f7f6;
}
.btn input::placeholder {
  color: #adbac4;
}
.btn .apply {
  margin-left: 24px;
  width: 115px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #00bcd4;
  border: 2px solid #00bcd4;
  background: white;
  border-radius: 3px;
}
.btn .apply:hover {
  cursor: pointer;
  background: #00bcd4;
  color: white;
}
.btn .cart {
  margin-left: 327px;
  width: 190px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: white;
  background: #00bcd4;
  border-radius: 3px;
  border: 2px solid #00bcd4;
  text-align: center;
}
.btn .cart:hover {
  cursor: pointer;
  background: #3498db;
  border-color: #3498db;
}

.quantity div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*# sourceMappingURL=price_table.css.map */

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source+Sans+Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/price_table.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table class="detail">
        <tr class="head">
          <th class="first_col"></th>
          <th class="product"><span>product</span></th>
          <th class="price_head"><span>price</span></th>
          <th class="quantity_head"><span>quantity</span></th>
          <th><span>total</span></th>
        </tr>

        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">lorem ipsum dolor sit amet</span>
                <span class="grey">size: large, color: black</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$35.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$35.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">consectetur adipisicing</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$1285.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$1285.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">Elit sed do eiusmod</span>
                <span class="grey">size: large</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$89.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$89.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">tempor incididunt ut labore</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$12.00</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">12.00</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">et dolore magna aliqua</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$158.25</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">158.25</span></td>
        </tr>
      </table>
      <div class="btn">
        <input type="text" placeholder="enter coupon code here.." />
        <button class="apply">apply</button>
        <button class="cart">update cart</button>
      </div>
    
    </section>
  </body>
</html>

Export to excel with symbol

In JavaScript, how can I check if a symbol(for example €) is present in the HTML cell of a table and only in that case when exporting table to xls, delete the period if present and replace it with a comma in other cases?

Render tooltip outside/on top of a cell in html table?

I have a vue project that is utilizing the VueGoodTable Library. I am trying to put a conditional tool tip in data cells who's data is considered "abnormal" (this calc is done on the backend and is not important to my current issue).

Right now I am simply trying to show a tooltip on all cells inside of this table, but as the picture here shows, it is trapped inside of the cell itself and no amount of messing with the z-index has proven fruitful in getting the tooltip to show up over everything.

This table library uses slots to render it's cells, so it makes sense that whatever is in that template tag, is contained within that cell, but how can I break that case?

Any tips or ideas would be greatly appreciated!

EDIT: There seems to be Table Events in this library I am using, but I am still very unsure about how I could use this to render a tooltip in the rows. Table Events from Docs

EDIT 2: Here is a post that seemed promising for showing a table who's cells have a tooltip in them. However, their example uses roughly the same styling as I do, but their z-index seems to actually matter. Perhaps this is a limitation brought on by the library itself?

I've replicated a barebones version of my current table and tooltip component to check out what I've got.

Codesandbox Link

App.uve

<template>
  <div style="display: flex; flex-direction: column">
    <div class="wrapper">
      <vue-good-table
        style="width: 100%"
        class="issue-tracker-style"
        :columns="columns"
        :rows="rows"
        :sort-options="{
          enabled: false,
        }"
      >
        <template v-slot:table-row="scope">
          <Tooltip>
            <div>{{ scope.formattedRow[scope.column.field] }}</div>
          </Tooltip>
        </template>
      </vue-good-table>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 15rem">
      <Tooltip> soemthing </Tooltip>
    </div>
  </div>
</template>

<script>
import Tooltip from "./components/Tooltip.vue";
export default {
  name: "my-component",
  components: { Tooltip },
  mounted: function () {
    let tdElm;
    let startOffset;

    Array.prototype.forEach.call(
      document.querySelectorAll("table th"),
      function (td) {
        td.style.position = "relative";
        //td.style.maxWidth = "unset";
        let grip = document.createElement("div");
        grip.innerHTML = "&nbsp;";
        grip.style.position = "absolute";
        grip.style.top = 0;
        grip.style.right = 0;
        grip.style.bottom = 0;
        grip.style.width = "5px";
        grip.style.cursor = "col-resize";
        grip.addEventListener("mousedown", function (e) {
          tdElm = td;
          startOffset = td.offsetWidth - e.pageX;
        });

        td.appendChild(grip);
      }
    );

    document.addEventListener("mousemove", function (e) {
      if (tdElm) {
        tdElm.style.minWidth = startOffset + e.pageX + "px";
      }
    });

    document.addEventListener("mouseup", function () {
      tdElm = undefined;
    });
  },
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name",
          //width: "100px"
        },
        {
          label: "Age",
          field: "age",
          type: "number",
        },
        {
          label: "Created On",
          field: "createdAt",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
        {
          label: "Name",
          field: "name",
        },
        {
          label: "Age",
          field: "age",
          type: "number",
        },
        {
          label: "Created On",
          field: "createdAt",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
        {
          label: "Name",
          field: "name",
        },
        {
          label: "Age",
          field: "age",
          type: "number",
        },
        {
          label: "Created On",
          field: "createdAt",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy",
        },
        {
          label: "Percent",
          field: "score",
          type: "percentage",
        },
      ],
      rows: [
        { id: 1, name: "John", age: 20, createdAt: "", score: 0.03343 },
        {
          id: 2,
          name: "Jane Jacob Johnson OOOO",
          age: 24,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
        {
          id: 3,
          name: "Susan",
          age: 16,
          createdAt: "2011-10-30",
          score: 0.03343,
        },
        {
          id: 4,
          name: "Chris",
          age: 55,
          createdAt: "2011-10-11",
          score: 0.03343,
        },
        {
          id: 5,
          name: "Dan",
          age: 40,
          createdAt: "2011-10-21",
          score: 0.03343,
        },
        {
          id: 6,
          name: "John",
          age: 20,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
        {
          id: 3,
          name: "Susan",
          age: 16,
          createdAt: "2011-10-30",
          score: 0.03343,
        },
        {
          id: 4,
          name: "Chris",
          age: 55,
          createdAt: "2011-10-11",
          score: 0.03343,
        },
        {
          id: 5,
          name: "Dan",
          age: 40,
          createdAt: "2011-10-21",
          score: 0.03343,
        },
        {
          id: 6,
          name: "John",
          age: 20,
          createdAt: "2011-10-31",
          score: 0.03343,
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.wrapper {
  border: 1px solid red;
  width: 400px;
  height: 200px;
  overflow-y: scroll;
}
body {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
.issue-tracker-style {
  font-family: "Inter";
  width: 100%;
  .vgt-inner-wrap {
    box-shadow: none;
  }
  td > div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  td > div > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  thead {
    border: 1px solid #f0f7ff;
  }
  tr {
    background: white;
    margin: 0;
    height: 32px;  }
  td {
    min-width: 70px;
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  tr th {
    color: #4859af;
    font-weight: 600;
    height: 100%;
    vertical-align: middle;
    padding: 0.5rem 0;
    font-size: 13px;
    background: #fafafa;
    border: 2px solid #efeff0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  tr td {
    padding: 0;
    font-size: 13px;
    color: #4859af;
    background: white;
    border: 2px solid #efeff0;
    height: 42px;
    vertical-align: middle;
  }
  tr td,
  tr th {
    text-align: center;
  }
}
</style>

Related questions

Adjust column width to content, only one column will extend to table width

See also questions close to this topic