Повторюсь, нужно чтобы от слова "текст" до цифр шли точки как на
скриншоте... Подходит решение как на чистом CSS, так и на JS и JQuery.
Судя по вашему вопросу, я так полагаю, мы можем воспользоваться любыми средствами, но мы не можем трогать разметку HTML
. В таком случае вот вам решение на JS
+ незначительные дополнения к вашему CSS
(не нарушая структуру или свойства таблицы). Это решение всегда железно будет работать у вас визуально красиво в том случае, если в правых ячейках таблицы будут использоваться цифры. Это может быть любая нумерация, стоимость или что-то еще, не суть важно, главное - это небольшое количество знаков. Вы можете конечно размещать в правых ячейках и текст, но тогда нужно будет регулировать ширину правого столбца, что будет не совсем удобно, но совсем не сложно. Но я и не стремился подгонять это решение под такой универсальный формат вывода, учитывая, что в вашем вопросе четко сказано "до цифр".
Как-то видел тут потрясающее решение, чтобы сделать такой вывод точек
от текста до блока справа с цифрами.
Вы не могли видеть никакого потрясающего решения, а точнее сказать - для вас любое ранее найденное решение потрясающим не будет, потому что вы берете за основу таблицу. Я по крайней мере такого решения еще не встречал, которое бы решало именно вашу задачу. Однако, если для вас это не столь важно и с помощью CSS
вы готовы таблицу "превращать" в любой блочный элемент, тогда в этом случае руки полностью развязываются и потрясающее решение создать будет совсем не сложно. Но это уже другой вопрос.
На ваш вопрос я ответил. Успехов!
document.addEventListener("DOMContentLoaded", () => {
let table = document.querySelector('.table');
let tr = table.getElementsByTagName('tr');
let td = null;
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
let text = ".";
td[0].innerHTML = `<span>${td[0].innerHTML}</span>${'.'.repeat(1000)}`;
td[1].innerHTML = `<span>${text.repeat(1000)}${td[1].innerHTML}</span>`;
}
});
* {margin: 0; padding: 0; border: none;}
table {
border: 1px solid black; border-spacing: 0 10px; line-height: 1;
}
td {
vertical-align: bottom;
}
td:first-child {
width: 100px; max-width: 100px; overflow: hidden;
}
td:last-child {
width: auto; min-width: 55px; max-width: 100px;
position: relative; overflow: hidden; text-align: right;
}
td:last-child>span {
position: absolute; bottom: 0; right: 0;
}
<table class="table">
<tr>
<td>Некоторый текст</td>
<td>10</td>
</tr>
<tr>
<td>Текст</td>
<td>1000000</td>
</tr>
<tr>
<td>Некоторый очень длинный текст</td>
<td>1</td>
</tr>
</table>
upd/
document.addEventListener("DOMContentLoaded", () => {
let table = document.querySelector('.table');
let tr = table.getElementsByTagName('tr');
let td = null;
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
let text = ".";
td[0].innerHTML = `<span>${td[0].innerHTML}</span>${'.'.repeat(1000)}`;
td[1].innerHTML = `<span>${text.repeat(1000)}${td[1].innerHTML}</span>`;
}
});
* {margin: 0; padding: 0; border: none;}
table {
border: 1px solid black; border-spacing: 0 10px; line-height: 1;
}
td {
vertical-align: bottom;
}
td:first-child {
width: 100px; max-width: 100px; overflow: hidden;
}
td:last-child {
width: auto; min-width: 120px; max-width: 150px; /*здесь выставляем нужную нам минимальную и максимальную ширину правой ячейки*/
position: relative; overflow: hidden; text-align: right; white-space: nowrap; /*здесь добавляем свойство white-space: nowrap; которое запрещает переносить слова на новую строку. Хотя, оно не столь нужно*/
}
td:last-child>span {
position: absolute; bottom: 0; right: 0;
}
<table class="table">
<tr>
<td>Некоторый текст</td>
<td>10</td>
</tr>
<tr>
<td>Текст</td>
<td>1000000</td>
</tr>
<tr>
<td>Некоторый очень длинный текст</td>
<td>1</td>
</tr>
<tr>
<td>Некоторый длинный текст</td>
<td>20*20 см</td>
</tr>
<tr>
<td>Некоторый текст</td>
<td>Короткий текст</td>
</tr>
</table>