由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。
类似的问题，例如固定高度和更改标题宽度（HTML 表） - 但我想问：除了使用 代替空格之外，还有其他方法可以实现此目的吗？巴斯...
我想在表格中显示图像样本和一些相关的文本信息。 在jupyter笔记本上可以做到这一点吗？ 我尝试混合 pandas 和 PIL，但没有成功： ...
我正在尝试使用 TypeScript 和 HTML 编写代码来创建一个表格来显示我的数据。然而，由于管理“rowspan”的复杂性，我遇到了困难。这是我的数据：
你好，我想将 api 中的数据放入表的 tbody 中，但是当我使用下面的代码时。 它为每个数据创建一个 tbody 标签。 我希望所有数据都在一个 tbody 标记中。 我能怎么做 ？ 获取（获取数据） ...
如果我在表格标签上有边框折叠属性，我的边框半径不会显示。我需要打开 border-radius 属性，如果删除 border-collapse 属性，我就看不到我想要的外观...
我有一个视图定义（尝试）将模型输出为表格。这是我到目前为止所拥有的： def 输出表（请求）： 输出 = My_Model() 返回 render_to_response('outputtable.ht...
position 是粘性的，overflow-x 是滚动的：plan - space - trafic 直到 20 属性 我还希望位置是粘性的：计划 1 - 计划 2 - 计划 3 - 计划 4 - 计划 5 直到计划 20 添加代码CSS：
我有一张桌子，我想在td上设置30px的固定宽度。问题是当td中的文本太长时，td会被拉伸超过30px。溢出：隐藏不起作用 ei...
我想从 https://en.wikipedia.org/wiki/List_of_Eurovision_Song_Contest_host_cities 抓取第一个维基百科表格。困难在于表格合并了单元格（一些......
我正在尝试使用表格为视力障碍者创建一个 Bootstrap 4 日历，该表格将使用浏览器的全宽和高度显示。在某人的帮助下我成功了...
我有一张桌子，我正在 tr 上显示叠加层。它不适用于 Chrome，但适用于 Firefox。 我想在 tr 上提供背景叠加。我尝试了下面的代码，但我得到的是......
我在一个表中有三个 tbody，我能够使用以下代码隐藏第一个 tbody 中的第一个和第二个 tr $("table.ms-formtable tr:first").hide(); $("table.ms-formtable tr:nth-child(2)").hide();...
我尝试对齐由JavaScript生成的表格，但我已经尝试了所有方法，但没有任何效果！ 注意：我已经尝试使用带有 text-align:center 的 head 上的显示块，已经尝试使用
我尝试对齐由JavaScript生成的表格，但我已经尝试了所有方法，但没有任何效果！ 注意：我已经尝试使用带有 text-align:center 的 head 上的显示块，已经尝试使用
我有以下数据框： 第 1 列 <- rep(c("A","B","C","D"),10) col2 <- rep(c(1,0),10) col3 <- rep(c(0,1),10) col4 <- rep(c(1,0),10) col5 <- rep(c(0,1),10) test_df <- data.f...
如何在使用jQuery动态删除行后重置表中TD元素内的输入元素的值和ID？
我有下表： SR 物体 重量 颜色 形状 我有下表： <thead> <th>SR</th> <th>Object</th> <th>Weight</th> <th>Color</th> <th>Shape</th> <th>DeleteBtn</th> </thead> <tr> <td><input type="text" id="sr1" value="1" class="sr"></td> <td><input type="text" id="object1" value="toy"></td> <td><input type="text" id="weight1" value="5kg"></td> <td><input type="text" id="color1" value="green"></td> <td><input type="text" id="shape1" value="round"></td> <td><input type="button" class="deleteRow"></td> </tr> <tr> <td><input type="text" id="sr2" value="2"></td> <td><input type="text" id="object2" value="bottle"></td> <td><input type="text" id="weight2" value="1kg"></td> <td><input type="text" id="color2" value="red"></td> <td><input type="text" id="shape2" value="cylinder"></td> <td><input type="button" class="deleteRow"></td> </tr> </table> 以上代码仅用于说明。这些行是使用 php、ajax、jQuery 动态生成的。第二列输入元素还具有自动完成功能，基于该功能为每行填充其他列。此外，每个输入元素的 ID 对于进一步复杂的操作数据也很重要。 我已经设置了添加行的代码，该代码将下一个顺序值分配给 SR 列的新生成的行，并为每行依次生成带有 ID 的新行。 但我在删除一行后遇到按顺序重置 SR 值和 ID 的问题，因为用户可以删除中间任意位置的行。 如何按顺序重置 SR 列内输入标记的值属性，并根据新的行数为每行的每个输入元素分配顺序 ID，如上面的代码所示？ 您必须向每个表行添加 id 字段，如下所示 <tr id="tr_1"> <td><input type="text" id="sr1" value="1" class="sr"></td> <td><input type="text" id="object1" value="toy"></td> <td><input type="text" id="weight1" value="5kg"></td> <td><input type="text" id="color1" value="green"></td> <td><input type="text" id="shape1" value="round"></td> <td><input type="button" class="deleteRow"></td> </tr> 对应于 sr1，它对于所有行都是唯一的。当您通过 JavaScript 或 jQuery 执行删除命令时 您可以使用jquery的remove()函数来删除行 <tr id="tr_1"> <td><input type="text" id="sr1" value="1" class="sr"></td> <td><input type="text" id="object1" value="toy"></td> <td><input type="text" id="weight1" value="5kg"></td> <td><input type="text" id="color1" value="green"></td> <td><input type="text" id="shape1" value="round"></td> <td><input type="button" class="deleteRow"></td> </tr> var id // you row identifier $('#tr_'+id).remove();
我创建了一个包含许多表格的 HTML 文档。如何将文档转换为Word？ 问题是，如果我用 Word 打开 HTML 文档，我会得到一些非标准的双行表格......
我有与此类似的 HTML： 公告 我有与此类似的 HTML： <div class="table-responsive"> <table class="table borderless"> <caption> <h3>Announcements</h3> </caption> <tbody> <tr > <td> If you are waiting for your certificate from your trainer, please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer, which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment, etc. </td> </tr> </tbody> </table> </div> 当我在小视口中查看输出时，表格会正确调整大小，但表格单元格中的段落内容不会换行，因此会显示滚动条。我预计响应行为会包裹段落内容。我该如何实现这一目标？ 只需简单地使用如下所示，它就会自动换行表格中的任何长文本。不需要别的 <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">long long comments</td> 因此您可以使用以下内容： td { white-space: normal !important; // To consider whitespace. } 如果这不起作用： td { white-space: normal !important; word-wrap: break-word; } table { table-layout: fixed; } 我遇到了与您相同的问题，但上述答案没有解决我的问题。我能够解决这个问题的唯一方法是创建一个类并使用特定的宽度来触发我的特定用例的包装。作为示例，我在下面提供了一个片段 - 但我发现您需要针对相关表格调整它 - 因为我通常根据布局使用多个 colspan。我认为 Bootstrap 失败的原因是因为它消除了包装约束以获得滚动条的完整表格。 colspan 一定是把它绊倒了。 <style> @media (max-width: 768px) { /* use the max to specify at each container level */ .specifictd { width:360px; /* adjust to desired wrapping */ display:table; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } } 我希望这有帮助 该行为是故意的： 通过将任何 .table 包装在 .table-responsive 中来创建响应式表格使它们在小型设备上水平滚动（768px 以下）。当查看宽度大于 768 像素的任何内容时，您不会在这些表格中看到任何差异。 这意味着表格默认是响应式的（正在调整其大小）。但前提是您希望在没有足够空间时不破坏表格线条并添加滚动条，请使用 .table-responsive 类。 如果您查看 bootstrap 的源代码，您会注意到有一个媒体查询仅在 XS 屏幕尺寸上激活，并将表格文本设置为 white-space: nowrap，这会导致其不会中断。 TL;博士;解决方案 只需从 html 代码中删除 .table-responsive 元素/类即可。 编辑 我认为你的桌子一开始没有响应的原因是你没有包装像这样的 .container、.row 和 .col-md-x 类 <div class="container"> <div class="row"> <div class="col-md-12"> <!-- or use any other number .col-md- --> <div class="table-responsive"> <div class="table"> </div> </div> </div> </div> </div> 有了这个，您仍然可以使用 <p> 标签，甚至使其响应。 请参阅 Bootply 示例此处 UberNeo 的回复是好的，我喜欢它，因为除了 TD 之外，你不需要修改任何其他内容。唯一的一点是，您还必须在样式中添加“white-space:normal”，以保持表格的响应特性，如果没有，在某些分辨率下，不会进行换行，表格也不会滚动出现。 style="word-wrap: break-word;min-width: 160px;max-width: 160px;white-space:normal;" .table td.abbreviation { max-width: 30px; } .table td.abbreviation p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table class="table"> <tr> <td class="abbreviation"><p>ABC DEF</p></td> </tr> </table> 那么好吧。您可以使用 CSS 自动换行属性。像这样的东西： td.test /* Give whatever class name you want */ { width:11em; /* Give whatever width you want */ word-wrap:break-word; } 在 css 外部文件中使用它。 .td-table { word-wrap: break-word; word-break: break-all; white-space: normal !important; text-align: justify; } 就这样做 style="word-wrap: break-word min-width:; max-width:;" 然后设置你想要的width 在 Bootstrap 5.0 中这样做： <td class="w-50 text-break">teeeeeeeeeeeeeeest</> 您可以根据文档使用w-25或其他东西 在 bootstrap 5 及以上版本中： 2024 年 3 月 5 日 下午 4:20 文字现在可以正常换行。 使用 table-responisve 类添加新类“tableresp”，然后在 js 文件中添加以下代码 $(".tableresp").on('click', '.dropdown-toggle', function(event) { if ($('.dropdown-menu').length) { var elm = $('.dropdown-menu'), docHeight = $(document).height(), docWidth = $(document).width(), btn_offset = $(this).offset(), btn_width = $(this).outerWidth(), btn_height = $(this).outerHeight(), elm_width = elm.outerWidth(), elm_height = elm.outerHeight(), table_offset = $(".tableresp").offset(), table_width = $(".tableresp").width(), table_height = $(".tableresp").height(), tableoffright = table_width + table_offset.left, tableoffbottom = table_height + table_offset.top, rem_tablewidth = docWidth - tableoffright, rem_tableheight = docHeight - tableoffbottom, elm_offsetleft = btn_offset.left, elm_offsetright = btn_offset.left + btn_width, elm_offsettop = btn_offset.top + btn_height, btn_offsetbottom = elm_offsettop, left_edge = (elm_offsetleft - table_offset.left) < elm_width, top_edge = btn_offset.top < elm_height, right_edge = (table_width - elm_offsetleft) < elm_width, bottom_edge = (tableoffbottom - btn_offsetbottom) < elm_height; console.log(tableoffbottom); console.log(btn_offsetbottom); console.log(bottom_edge); console.log((tableoffbottom - btn_offsetbottom) + "|| " + elm_height); var table_offset_bottom = docHeight - (table_offset.top + table_height); var touchTableBottom = (btn_offset.top + btn_height + (elm_height * 2)) - table_offset.top; var bottomedge = touchTableBottom > table_offset_bottom; if (left_edge) { $(this).addClass('left-edge'); } else { $('.dropdown-menu').removeClass('left-edge'); } if (bottom_edge) { $(this).parent().addClass('dropup'); } else { $(this).parent().removeClass('dropup'); } } }); var table_smallheight = $('.tableresp'), positioning = table_smallheight.parent(); if (table_smallheight.height() < 320) { positioning.addClass('positioning'); $('.tableresp .dropdown,.tableresp .adropup').css('position', 'static'); } else { positioning.removeClass('positioning'); $('.tableresp .dropdown,.tableresp .dropup').css('position', 'relative'); }
我可能会错过一些愚蠢的事情，但我需要有人帮助。 我拍摄了一张图像并使用 Photoshop 将其切成块。我正在尝试使用 HTML 表重建它。 我设法重新创建...
我正在尝试创建一个渲染的页面布局： 固定宽度的侧边栏 主要内容部分 标题行（标题+按钮） 一张桌子 该表可能包含相当多的列，但我不想要