JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<div contenteditable="true">
<p>press Enter here</p>
<table class="first-table">
    <caption>Collapsed Border; <br/>Cell bottom left borders 0</caption>
    <tr><td><input /></td></tr>
        <tr><td><input /></td></tr>
            <tr><td><input /></td></tr>
</table>

<table class="second-table">
    <caption>Not Collapsed Border<br/>Cell bottom left borders 0</caption>
    <tr><td><input /></td></tr>
</table>

<table class="third-table">
    <caption>Not Collapsed Border <br/>Cell has all borders </caption>
    <tr><td><input /></td></tr>
</table>
</div>

CSS

div {
  padding: 10px;
}
.first-table {
    border-collapse: collapse;
    border: 10px solid blue;
}

td {
    border-left: 10px solid red;
    border-right: 10px solid green;
    border-top: 10px solid orange;
    border-bottom: 10px solid pink;
    background-clip: padding-box;
    
}
.second-table td, .first-table td {
  border-right-width: 0;
  border-bottom-width: 0;
}

table {
    display: inline-table;
    vertical-align: top;
    border: 10px solid blue;
}

JavaScript

document.addEventListener("input", ({ target }) => {
    const result = target.value && target.value.length <= 2;
    target.style.marginBottom = result ? "3em" : "0em";
});