Ширина колоноки

by Maxim_Wolf

HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11 фыва д фы вд фывдло фывдлофывдл офыдвло фыдло фывдло фывдло фывло жфдыло ф ывлождфывло афы</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21 дофывлдо дфжло джфло дло фыв аждло фы вджло жфдыло вфыдвжло фыджло фы</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

<form>
  <input title="некоректное значение">
</form>

CSS

/*th:after {
  content: "I";
  color: rgba(20, 20, 0, 0.05);
  float: right;
}
*/
th:hover:after {
   content: "I";
    float: right;
  color: rgba(0, 20, 0, 0.3);
  cursor: col-resize;
}

td {
  background-color: #00F800;
}

input:invalid {
  border-color: red;
  background-color: rgba(255, 0, 0, 0.1);
}

React

const a = document.querySelector("th");
const MouseButtons = {
  LEFT: 1,
}
let resizing = false;
let x0 = 0;
let w
const handleMoveEvent = (e) => {
  if (resizing) {
    a.style.width = `${(w+e.pageX-x0)}px`;
  }
}
const handleMouseUpEvent = () => {
  resizing = false;
  document.removeEventListener("mousemove", handleMoveEvent);
}
a.addEventListener("mousedown", (e) => {
  if (e.which !== MouseButtons.LEFT) {
    return;
  }
  
  e.preventDefault();
  resizing = true;
  x0 = e.pageX;
  w = a.offsetWidth;
 
  document.addEventListener("mouseup", handleMouseUpEvent, {
    once: true
  });
  document.addEventListener("mousemove", handleMoveEvent);
});

const i = document.querySelector("input");
i.setCustomValidity("некоректное значение");