Я создал таблицу, в которую я хочу, чтобы пользователь мог вводить данные.Теперь, когда ТД выбран / сфокусирован, я хочу повернуть границу вокруг него в цвете.Я уже пробовал это, но когда я делаю это, он оставляет тонкий разрыв между полем ввода и тд, даже если я установил отступ на 0.
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
body {
font-family: "Lato", sans-serif;
}
input {
width: 120px;
height: 20px;
border: 1px;
padding: 5px;
outline: none;
}
input:focus {}
table {
margin: 50px;
font-weight: 400;
border-collapse: collapse;
}
th {
font-size: 20px;
}
td:focus {
border: 1.5px solid orange;
}
td,
th {
font-weight: 900;
width: 120px;
border: 1px solid #dddddd;
text-align: left;
padding: 0;
}
<body>
<table>
<tr>
<th>Income</th>
<th>Outgoings</th>
<th>Taxes</th>
<th>Total</th>
</tr>
<tr>
<td><input type="text" placeholder="CHF"></td>
<td><input type="text" placeholder="CHF"></td>
<td><input type="text" placeholder="CHF"></td>
<td><input type="text" placeholder="CHF"></td>
</tr>
Я надеюсь, что кто-нибудь может мне помочь.