我想在 html5 中设置制表位并能够将文本与它们对齐，就像在 Word 中一样。对于我的应用程序，我不能使用表格。有没有办法做到这一点？我必须使用Javascript吗？
问问题
21596 次
7 回答
17
尽管其他海报的断言相反，有正当的理由想要做 OP 要求的事情以及使用现代 CSS 的许多方法（以及在我撰写本文时的规范草案过程中的更多内容）。这只是一种方法。
<!DOCTYPE HTML>
<html>
<head>
<title>Tabs with css</title>
<style>
{body: font-family: arial;}
div.row span{position: absolute;}
div.row span:nth-child(1){left: 0px;}
div.row span:nth-child(2){left: 250px;}
div.row span:nth-child(3){left: 500px;}
</style>
</head>
<body>
<div class="row"><span>first row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
<div class="row"><span>second row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
<div class="row"><span>third row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
<div class="row"><span>fourth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
<div class="row"><span>fifth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
</body>
</html>
在此处查看示例结果：http: //jsfiddle.net/Td285/
另一个例子，溢出剪辑：http: //jsfiddle.net/KzhP8/
于 2014-01-25T20:46:44.170 回答
3
您可以使用 CSS 属性
p
{
text-indent:50px;
}
您可以为每个缩进使用 css 类，例如
h1 { text-indent: 10px; }
h2 { text-indent: 14px; }
h3 { text-indent: 18px; }
p { text-indent: 20px; }
p.notice { text-indent: 24px; }
并像这样做HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Text 1</p>
<p class="notice">Text 2</p>
因为您只能使用此属性缩进一行，所以还有另一种支持多行缩进的方法：
h1 { padding-left: 10px; }
h2 { padding-left: 14px; }
h3 { padding-left: 18px; }
p { padding-left: 20px; }
p.notice { padding-left: 24px; }
最后是小提琴。
于 2013-08-22T00:38:54.967 回答
1
其实我也有类似的情况，而且我做的很简单。<span>在属性内使用<p>，并适当地浮动它。
CSS：
p.main-text { /* these properties don't matter much */
margin: 0;
text-indent: 0;
font-size: 1em;
line-height: 1.2;
text-align:justify;
}
span.column-width { /*this defines the width of the first column */
width: 33%;
float: left;
}
html:
<p class="main-text"><span class="column-width">Diary Date: 2016 April 01 —</span>This is the text of the diary entry. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit. Integer molestie sed mauris eget gravida. Fusce aliquam diam eu arcu imperdiet vehicula. Fusce fermentum molestie aliquet. Phasellus sodales, mauris sed ornare accumsan, dolor ligula vehicula magna, vel pulvinar sapien lorem condimentum purus. Etiam vulputate commodo mattis. Etiam non tincidunt leo, eget ultricies mauris. Fusce rhoncus ultrices purus. Nunc id scelerisque nisi, quis congue turpis.</p>
小提琴：http: //jsfiddle.net/Q3ruh/44/
于 2016-04-29T08:34:43.297 回答
0
解决方案似乎是使用 Javascript。这是一个简单的例子： http: //jsfiddle.net/A6z5D/1：
<p>Hello bla bla bla<span id="tab1"></span>world</p>
<script>
function do_tab(id, tabstops)
{
var tab1 = document.getElementById(id);
var rect = tab1.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
var tabstop = 0;
for (var i = 0; i < tabstops.length - 1; ++i)
{
if (rect.left >= tabstops[i] && rect.left < tabstops[i+1])
{
tabstop = tabstops[i+1];
}
}
if (tabstop > 0)
{
var width = tabstop - rect.left;
tab1.style.display = "inline-block";
tab1.style.width = width + "px";
}
}
do_tab("tab1", new Array(0, 100, 200, 300, 400));
</script>
于 2013-08-22T13:59:22.577 回答
0
<div>您可以使用为它们提供相同固定宽度的类将数据划分为s。这样，列将全部排列。
<style>
div.col-1 {
width: 200px
}
div.col-2 {
width: 500px
}
</style>
First row is:
<div class="col-1">Some text here </div><div class="col-2">And here </div>
...
Second row is:
<div class="col-1">And here </div><div class="col-2">And here </div>
于 2015-11-25T22:50:22.420 回答
0
我知道这个问题说没有表格，并且以前的 JS 答案不受欢迎，但应该有人觉得这很有用。它不会做真正的制表位，但即使使用 CSS 也是不可能的。
如果你不想做一堆手动span或table标签，这个 JS 会在页面加载时自动将类“标签”的所有元素变成一个表格，使用制表符作为指导。
JS 小提琴：https ://jsfiddle.net/s7m6zggp/7/
编辑：再想一想，也许不是最好的方法。正则表达式让我的大脑陷入了循环。但如果有人想使用它，我会继续使用 Fiddle。
于 2016-08-26T08:37:49.543 回答
0
简要地认为我最近可能需要类似的东西，所以使用当前接受的答案作为基础模拟了以下内容。原始答案看起来对于小文本值（例如对齐值列表）可能没问题，但是如果您调整大小和/或将包裹在内联块区域内，较长的文本不会重排。
<html>
<head>
<style type="text/css">
/* decorative styles for demo only */
html, body {
margin: 0;
padding: 0;
}
p {
background-color: lightyellow;
}
div#ruler {
border-bottom: 1px solid gray;
overflow: hidden;
white-space: nowrap;
}
div#ruler>span {
display: inline-block;
text-align: right;
font-size: xx-small;
color: gray;
border-right: 1px solid gray;
overflow: hidden;
box-sizing: border-box;
}
span.tabbed, br.tab {
background-color: lightcyan;
}
/* seems to be needed if text-indent used for spacing; no harm for padding/margin... */
span.tabbed::before {
display: inline-block;
content: '';
}
/* doesn't work universally, was hoping to use for better semantics -- maybe revisit... */
br.tab {
content: '';
display: inline;
}
</style>
<script type="text/javascript">
// for rate-limiting resize/scroll event firing
function debounce(func, wait, immediate) {
// ref: https://davidwalsh.name/javascript-debounce-function
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// decorative; used for drawing a ruler at the top of the page only
function applyTabRuler(pid, tabstops) {
var parent = document.getElementById(pid);
if (!parent) {
parent = document.createElement('div');
document.body.insertBefore(parent, document.body.firstChild);
}
for (var s = 1, slen = tabstops.length; s < slen; s++) {
var width = tabstops[s] - tabstops[s - 1];
var tab = document.createElement('span');
tab.appendChild(document.createTextNode(s));
tab.style.width = tab.style.maxWidth = tab.style.minWidth = '' + width + 'px';
parent.appendChild(tab);
}
}
// call this to align elements matching className to pixel-posiitoned tabstops
// tabstops should be an array of monotonically-increasing pixel positions
function applyTabStops(className, tabstops) {
// try also paddingLeft or textIndent (may need a ::before{display:inline-block})
var styleProp = 'marginLeft';
var tabbed = document.getElementsByClassName(className);
var bodyRect = document.body.getBoundingClientRect();
var inlineMarker = document.createElement('span');
for (var t = 0, tlen = tabbed.length; t < tlen; t++) {
tabbed[t].style[styleProp] = '0px';
tabbed[t].insertBefore(inlineMarker, tabbed[t].firstChild);
var tabRect = inlineMarker.getBoundingClientRect();
var tabstop = 0;
for (var s = 0, slen = tabstops.length - 1; s < slen; s++) {
if (tabRect.left >= tabstops[s] && tabRect.left < tabstops[s + 1]) {
tabstop = tabstops[s + 1];
break;
}
}
if (tabstop > 0) {
var width = tabstop - tabRect.left + bodyRect.left;
tabbed[t].style[styleProp] = '' + width + 'px';
}
}
if (inlineMarker && inlineMarker.parentNode) {
inlineMarker.parentNode.removeChild(inlineMarker);
}
}
</script>
</head>
<body>
<div>
<div id="ruler"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus congue purus vel blandit.
<span class="tabbed">Cras non justo vitae orci vehicula tincidunt. Aliquam convallis cursus nisi,
eu varius odio rutrum ut. Morbi id accumsan velit. Proin commodo consequat urna aliquam
imperdiet.</span> Curabitur laoreet est ut venenatis suscipit. Sed id vulputate enim.
<span class="tabbed">Etiam libero massa, suscipit eget interdum non, vulputate nec eros. In hac
habitasse platea dictumst.</span>
Ut vestibulum venenatis ante, at vestibulum ex varius eu. Nam lorem
turpis, euismod a aliquam vel, placerat iaculis mauris. Integer et eros turpis. Ut quis volutpat
urna, eu fermentum magna. Phasellus nunc turpis, accumsan nec velit eget, pretium semper urna.
</p>
<p>
<span class="tabbed">Suspendisse nibh nibh, ultrices vitae odio aliquam, facilisis euismod dui.</span>
Quisque dignissim felis in luctus faucibus. Sed at finibus leo. Suspendisse potenti. Nullam
commodo eleifend porttitor. Nam id dolor pretium felis rutrum posuere. Vivamus maximus lorem
mauris, sit amet pulvinar diam luctus nec. Praesent ac euismod lectus.
<span class="tabbed">Fusce tempor metus eget posuere vehicula.</span>
Vestibulum porttitor vitae magna non consectetur. Ut nibh massa, molestie in
est nec, pellentesque rutrum purus. Nam sagittis felis gravida odio blandit, in tincidunt velit
ornare. Etiam congue tellus eros, at molestie risus luctus iaculis. Nulla et vehicula enim.
Integer pellentesque nunc augue, in scelerisque magna eleifend id. Etiam ut dapibus nulla, in
tincidunt justo.
</p>
<p>Sed iaculis enim fermentum arcu gravida tempus.
<span class="tabbed">Sed ipsum ante, scelerisque eget tellus eget, sagittis pellentesque odio.</span></p>
<p>Curabitur vestibulum felis non arcu cursus vehicula.
<span class="tabbed">Nunc blandit neque et imperdiet efficitur.</span></p>
<p>
Quisque malesuada cursus porttitor.
<span class="tabbed">Vestibulum porttitor libero massa, quis lacinia elit tempus vel.</span>
<br/>
Suspendisse laoreet sapien nec nulla placerat, vel dapibus nulla auctor.
<span class="tabbed">Phasellus ut dictum dolor, sit amet feugiat tellus.</span>
</p>
</div>
<script type="text/javascript">
// random tabstops, for testing...
var trun = 0;
var tabstops = [];
for (var t = 0, tlen = 50; t < tlen; t++) {
tabstops[t] = trun;
trun += ((200 * Math.random()) + 20);
}
// fixed tabstops...
//var tabstops = [0, 200, 300, 450, 500, 600, 700, 800, 900, 1000];
console.log(tabstops);
applyTabRuler("ruler", tabstops);
applyTabStops("tabbed", tabstops);
var reapplyTabStops = debounce(function() { applyTabStops("tabbed", tabstops); }, 100);
window.addEventListener('resize', reapplyTabStops);
window.addEventListener('scroll', reapplyTabStops);
</script>
</body>
</html>
（在 FF94、Edge95、IE11 中进行了烟雾测试）
设法得到最终消失的要求（毕竟，在表格中显示表格数据是可以的），但我想我会在这里提供它，以防它帮助其他人。
这并不完美：
- 有几个地方并没有完全对齐（我猜可能存在边距/填充问题）
- 回流对调整大小不是很好
- 没有为从右到左的语言做任何努力（
margin-inline可能就足够了） - 我更愿意将选项卡定义为中断（即
<br>）而不是<span>包含选项卡式内容 - 仅左对齐：无法将右对齐、居中或小数点与“制表位”对齐，这是 MS Word 制表位的一个重要特征
......但也许它足以让其他人超过线......
于 2021-11-08T21:56:46.880 回答