3回答
我试图垂直对齐所有文本。
如果我移除浮子:左；那么整个表就消失了？
.div-table{
display:table;
width:auto;
background-color:#ffffff;
border-spacing:20px;
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
}
.div-table-col{
float:left;
display:table-column;
wid
浏览 0提问于2015-09-22得票数 1
回答已采纳
1回答
我在做这个表，就像div和flex的布局一样，因为一些造型变得更加复杂，我不得不离开“真正的”<table>，然后这样做。这样就好了。
这里我的主要问题之一是，table-card、table-card__head或table-card__body并没有完全变宽来包装行。我就是我的例子，我做了一行，以便有更多的单元格。在这一点上，坦白地说，我不知道这是为什么。我非常感谢你的指点。
我也要放下一个，以防万一
* {
box-sizing: border-box;
}
/* plage specific */
.table-card__cell-width .table-
浏览 0提问于2019-01-10得票数 0
回答已采纳
1回答
我刚开始使用flexbox，并试图在它们自己的列中分别垂直对齐位于最左边和最右边的.calendar-arrow元素。我试着对它们进行绝对定位，但它们要么坐在我1280 to的边距之外，要么太靠近边距和日历。理想情况下，我想要实现一个布局，其中包括箭头在他们自己垂直对齐的柔箱列。例如，左箭头应位于左6左右，右箭头应围绕右12。
* {
box-sizing: border-box;
}
section {
max-width: 1280px;
}
#event-calendar {
margin: 0 auto;
padding: 0 1%;
overflow: aut
浏览 1提问于2016-12-23得票数 0
回答已采纳
1回答
我正在尝试构建一个基于表的响应日历，其中一个列(.calendar-arrow)垂直地围绕在其他列旁边。
我还试图在不使用静态填充值的情况下，将月份/日期标题与第一列(星期日列)左对齐。
我愿意对HTML进行重组。
* {
box-sizing: border-box;
}
#event-calendar {
margin: 0 auto;
padding: 0 1%;
overflow: auto;
}
#event-calendar h1 {
padding-bottom: 15px;
text-align: left;
}
#event-calendar #c
浏览 3提问于2016-12-23得票数 1
回答已采纳
2回答
我在努力做同样的弯曲框，弯曲方向的列行。下面添加了大部分代码。我已经尝试了很长一段时间来处理这个问题，我当然会感激你的帮助。
我的代码：
.table__cell {
flex: 1;
padding: 10px 20px;
border: 1px solid black;
margin: 3px;
}
.table--params {
width: auto;
flex: 1;
display: flex;
}
.table--params>.table__cell {
padding: 0;
display: flex;
flex-di
浏览 0提问于2021-07-07得票数 1
回答已采纳
目标
我试图为一系列div .table__color设置样式，其中div的宽度等于来自.table__pct元素数组的数据属性的值。
因此，如果数据属性的值为59，那么.table__color div的宽度为59%，从而显示出水平条形图的外观。
问题
现在，所有.table__color条的宽度都是相同的，因为我只能得到数组中的最后一项，因此所有div的宽度都是59%
scripts.js
// Target all the elements with a class of `table__pct` that contain a data-attribute.
浏览 3提问于2017-06-18得票数 2
回答已采纳
我想为HTML表格创建一个特定的布局，它有固定的列，而不使用默认标签(table，tbody，thead，tr，td，th)。
我开发了一个运行良好的示例，并意识到需要将position:relative添加到一些容器中。但是如果我添加了position:relative，布局就会中断...请参见下面的示例。
所以，问题来了。如何创建固定/粘滞列的表并保存position:relative，如下例所示？
.wrapper {
overflow-x: scroll;
}
.table, .table-head, .table-row {
position: relative;
浏览 2提问于2017-03-03得票数 1
1回答
我是Flexbox的新手，我试图构建一个响应性的基于表格的日历，在特定的单元格上设置圆形背景色。我遇到的问题是，由于每个单元格的宽度都是动态的，在更宽(大多数)的屏幕上，背景是椭圆形，而不是圆圈。如何在不干扰当前布局或使用固定大小的情况下将它们设置为圆圈？
作为一项奖励，我还希望能够动态地将日期/年份与最左边的列对齐。
CSS：
.table {
display: flex;
flex-flow: column nowrap;
box-pack: justify;
justify-content: space-between;
width: 100%;
height:
浏览 4提问于2016-12-22得票数 1
回答已采纳
我使用div生成表显示：
<div class="table-wrapper">
<div class="table-row">
<div class="table-cell">
Id
</div>
<div class="table-cell">
Name
</div>
<div class="table-ce
浏览 2提问于2013-09-04得票数 3
回答已采纳
建造一个计算器，却不知道从哪里开始。
我有一个计算器，它有几行--条目、项目成本、数量输入，然后是该项目的总数。用户将为输入项目的某些的数量。计算器将需要显示每个项目的活动成本(没有按钮)，然后所有的总计将需要添加和计算总计(显示在底部)。
<div class="calculator">
<div class="table">
<div class="table-body">
<div class="table-row">
<div c
浏览 4提问于2017-07-19得票数 0
回答已采纳
我正试图建立一个响应方格的网格，它看起来就像一张方形的纸。我用了一种预先准备好的解决方案，我试着采用它来达到我的目的。我的HTML代码如下所示( 4*4方格的示例网格)：
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
浏览 4提问于2018-01-13得票数 2
回答已采纳
1回答
我主要使用quickbase，我试图在不使用API调用的情况下创建一个图形。
是我的代码的一个工作版本，在两个表之间没有任何标记，但是如果它们存在的话，表之间可能有许多标记，就是结果。
(function() {
setTimeout(function() {
$("#mydivTable").each(function() {
var Rec = $('#mydivTable').attr('data');
console.log(Rec);
var valueArray = Array
浏览 7提问于2016-06-30得票数 0
回答已采纳
2回答
我正在尝试创建一个css表。这很好，直到我开始为第一列设置一个固定的宽度。
所以基本上我有：
<div class="table" style="width:100%;">
<div class="thead">
<div class="table-row">
<div class="table-cell" style="display:flex;align-items:center;min-width: 180px;
浏览 4提问于2017-05-30得票数 0
回答已采纳
我已经创建了一个基于网格的表替换。
网格的目的是在滚动时保持表格标题在顶部，为此我使用了position: sticky;。
虽然它工作得无懈可击，但它似乎并不关心我是否在上面设置了resize: horizontal;，它就是不让我这样做--我可以两者兼得，但不能两者兼得。
有解决办法吗？抱歉，如果我没有发布HTML代码，它是由vue生成的，它相当不可读，而且我还必须发布vue组件内容。
下面是SASS的想法：
.table {
display: grid;
overflow-y: scroll;
grid-template-columns: repeat(var(--col
浏览 2提问于2020-01-17得票数 1
我已经试着在CSS的显示表中修复colspan了。
.table {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
border-collapse: collapse;
}
.table-cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
.table-row.colspan {
di
浏览 83提问于2019-10-17得票数 1
这就是我需要的 ? 这就是我得到的 ? 这是我的HTML <div class="table">
<div class="table-row">
<div class="table-col"><p>Rok važenja:</p></div>
浏览 101提问于2021-07-15得票数 0
回答已采纳
1回答
我正在尝试为我的网站创建一种日期/时间选择。
css：
.top {
background-color: #82ceff !important;
}
.time-table-block{
margin-left: -4px;
margin-right: -4px;
margin-top : -4px;
margin-bottom : -4px;
background-color: #d6d6d6;
width: 12.5%;
height: 40px;
display: inline-table;
text-al
浏览 2提问于2016-01-20得票数 1
在使用display: table的标记中，我想用分隔线分隔一些行。 .table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {display: table-row; }
.table-cell {display: table-cell; width: 50%}
.border-between {border-top:1px solid;}
.padding-t {padding-top: .5rem}
.padding-b {padding-bottom: .5rem} &
浏览 18提问于2020-08-02得票数 0
2回答
我已经使用div创建了一个表，现在我希望多个列共享一个标题，该标题应该位于列的中心。
通常如下所示：
---Header--- a | b | C | d 1 | 2 | 3 | 4 p | q | R | S HTML：
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px;
/* cellspacing:poor IE support for this */
}
.div-table-ro
浏览 20提问于2018-02-27得票数 0
回答已采纳
我已经用divs创建了一个CSS表，该表由父rows和子rows组成，但我希望子rows在vuejs的帮助下使它们可见或隐藏。我的问题不是如何使它们可见/隐藏，如何正确地将父母与孩子对齐。
在我的示例中，子row的大小应该在父row 2和3之间，但是子row显示在父row的上方，数字为3。
在下面的示例中，在全屏模式下可以更好地看到不规则情况。
谢谢!
.div-table {
display: table;
width: 100%;
table-layout: auto;
font-size: 12px;
color: black;
}
.div
浏览 10提问于2020-02-13得票数 0
3回答
我对css选择器相当陌生，但我有一个带有需要选择的子元素的html结构。我尝试过一些方法，但是我很难选择我需要的元素。预先回答: HTML是由第三方软件添加的，我不能以任何方式修改它。这包括向元素中添加类。
这是HTML
<div class="smith-category-menu">
<div>
<div>
<table></table>
<div>
<table></table&g
浏览 2提问于2013-08-01得票数 2
回答已采纳
我试图实现一个垂直的项目列表，它将它们包装在overflow上，并产生一个水平滚动的列表。我想使用flexbox来实现这一点。
Webkit和IE生成预期的输出。Firefox并非如此。请参考此示例：
<div class="listbox flex-direction-vertical flex-wrap">
<div class="listitem"><div class="tablediv"><table><tr><td><div class=&
浏览 4提问于2013-02-22得票数 0
回答已采纳
我在一个页面上用div创建了多个表(出于响应的原因)。
然后，我使用jquery从表头创建一个数据属性，该属性将被添加到每个表单元格中。当屏幕达到720 as时，该数据属性稍后将作为表中每个单元格的标题在CSS content: attr(data-title);中使用。
当我有多个div表时，第一个表的头被应用于所有可见的表单元格，就会出现我的问题。
见下面的示例
我想知道是否有一种方法可以使jquery函数将头内容从第一个表应用到该表中的每个表单元格。然后下表也只接收它的表标题、内容等等.
var $table_header = $('.tech-specs header.ta
浏览 1提问于2016-10-02得票数 0
回答已采纳
1回答
表列滑块交替
、、、
我想要创建一个4列的表，但只显示3列。因此，理想情况下，我将有一个div跨3列并应用溢出:隐藏。按下按钮后，我希望第3栏(公司2)向左滑动，改为第4栏(公司3)，以便将公司3与公司1进行比较。如果再次单击该按钮，公司3应再次向左滑动，但公司2应从右滑行，回到原来的位置。之所以这样做，是因为在移动视图中，我们不能适应所有的列。
小提琴可以在这里找到：
HTML
<div class="div-table">
<div class="div-table-row header-row">
<div class=&#
浏览 2提问于2015-07-14得票数 0
回答已采纳
1回答
你能告诉我怎样才能实现表格的粘性标题吗？它位于带有overflow: auto和向右滚动div中。我支持IE10+。
这是我的html
<div class='table-block'>
<div class='table-header'>
<div>
header 1
</div>
<div>
header 1
</div>
<div>
header 1
浏览 0提问于2018-09-27得票数 0
1回答
放大显示: Chrome上的表格
、、、、
以这个CSS片段为例：
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
连同一些HTML：
<div class="table">
<div class="table-row">
<div class="table-cell">
<label>Label One</label&
浏览 4提问于2013-08-04得票数 0
回答已采纳
2回答
嗨，我已经使用显示属性创建了一个表，现在我有了一个数组，我想遍历这个数组，并遍历列和行的值，下面是我的代码：- html:=
<div id='table'>
<!-- table head -->
<div id="thead">
<div class="table-row">
<div class="table-cell">head 1</div>
<div class="table-cell">head 2&l
浏览 6提问于2020-02-11得票数 0
回答已采纳
3回答
我将使用div替换我所使用的表
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Benefits</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Preferences</di
浏览 0提问于2012-01-10得票数 0
我目前正在进行一个项目，在这个项目中，我必须使用<div>元素构建一个大数据表。我不会使用语义<table> (用于一些个人项目和实验室)。
我成功地使用了主表结构，使用了有用的display: table属性，但当我尝试将CSS边框样式应用于单元格(本文末尾的cells )时，我遇到了一些困难。单元格的宽度和高度都在增加，我无法避免使用边框属性。
<!-- Main Container -->
<div class="main-container">
<!-- Table container (where the d
浏览 5提问于2017-01-10得票数 1
回答已采纳
1回答
我有8个DIV(包含图像)在一排。我的问题是，我想在X之后得到一个新的行(这个数字是在一个滑块中设置的) DIV's。在这8个DIV的情况下，我想在4个DIV之后添加一个新的行。
我的DIV看起来是：
<div id="table-cell-x" class="table-cells"><img src="...."></div>
其中x=1->8
我想要的结果是(在8个DIVs和X设置为4的情况下)：
<div class="table-rows">
<
浏览 3提问于2017-12-30得票数 1
回答已采纳
我有以下DOM树关系
<div class="div-class"></div>
<table class="table-class"></table>
<div class="div-class"></div>
<table class="table-class"></table>
我想要做的是将.table-class移到.div-class中，但是当我使用prependTo('.div-class')运行jQue
浏览 6提问于2017-07-12得票数 1
回答已采纳
我有一个由div组成的表，并且我正在尝试将表头内容添加到移动设备使用的每个单元格的数据属性中。
但是，我的表会在每个单元格后面显示Object Object。我使用jQuery的效率不是最高的，所以如果有任何帮助，我将不胜感激。
var $table_header = $('.tech-specs header.table-row .table-cell');
var $table_cell = $('.tech-specs div.table-row .table-cell');
$table_cell.text(function(
浏览 30提问于2016-09-23得票数 0
回答已采纳
3回答
我有以下几点：
<section class="table">
<div class="table-row">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
<div class="table-row"
浏览 7提问于2016-09-09得票数 3
回答已采纳
我正在使用display:table;创建一个表，我希望奇数编号的行具有4 columns，但偶数编号的行仅具有跨越表的width的100%的1 column。这个是可能的吗？
.table {
display:table;
table-layout:fixed;
width:100%;
border-collapse:collapse;
white-space:nowrap;
}
.table-row {
display:table-row;
border:1px solid #000;
}
.cell {
display:
浏览 7提问于2018-07-19得票数 1
回答已采纳
2回答
函数返回数组，即使指定了索引
、、、、
我正在尝试选择包含div (按月选择)的"month-table_col"标记。
...
<div class="month-table">
<div class="month-table_row">
<div class="month-table_col">Jan</div>
<div class="month-table_col">Feb</div>
<div class=
浏览 6提问于2020-11-27得票数 2
回答已采纳
因此，我使用div创建一个表，并希望将表头的内容附加到表的各个相应单元格中。
因此，在下面的示例中，"1个IPv4地址“将变成”云服务器:1个IPv4地址“，以此类推。
$table_header = $('header.table-row .table-cell');
$table_cell = $('div.table-row .table-cell');
$table_header.each(function(index, el) {
$table_cell.append($table_header);
});
.table {
浏览 12提问于2016-09-09得票数 1
回答已采纳
1回答
的目标-以下列方式打印带有表格的页面：
如果整个表高于A4纸张列表，则复制每一页的标题
如果该表小于A4纸张列表，则不能在下一个表之前断开该页。
对于一行标题，此CSS属性的工作方式如下：
page-break-inside:auto;
The problem --它是通过使用带有2+行的更复杂的表头来实现的，而这些标头位于分页的中间位置。
为了更好地参考，下面是可以使用的示例表代码。请确保只使用此代码打开HTML文件，而不使用内置代码片段工具通常提供的任何附加代码：
<style>
td {
border: 1px solid ligh
浏览 4提问于2022-03-12得票数 0
谁能给我一个Jquery的例子，强制至少有一个字段被选中。我的问题是如何检查checkbox和dropdownlists (默认为空字符串)之类的项？注意:使用ASP.NET MVC3 C#
我在视图中的代码：
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search/Contacts</legend>
<div class="div-table">
<div class=&#
浏览 1提问于2011-12-06得票数 0
1回答
我使用在特定页面上显示CPT。我已经设置了它，以便将每3篇文章封装在div类的o-table-cell中，并使用类o-table与父div一起使用，这个类工作得很好。
我使用display:table;和display:table-cell作为内容，它们都必须在高度和位置上相互关联，这是最好的。
到目前为止是如何工作的：
<div class="o-table">
<div class="o-table-cell">Dynamic Content</div>
<div class="o-table-cell&
浏览 0提问于2017-04-29得票数 0
2回答
我想在基于div/css的表中模拟以下行为
<table>
<tr>
<td>a</td>
<td style="padding-top: 20px">a</td>
</tr>
</table>
单个单元格的边距似乎被忽略了。
<div style="display: table;">
<div style="display: table-row">
<
浏览 0提问于2014-12-15得票数 1
回答已采纳
我有下面的HTML结构：
<div id="table_wrapper">
<div class="rows_table" id="rows_table_row_0">
<div class="rows_table_row highlight-row-0" id="row_0">
<div class="rows_table_cell rows_table_cell_small">row</div>
浏览 3提问于2017-03-14得票数 1
2回答
是否有办法将为每个表选择的单元格数量限制为2？
我试过使用最接近的方法，但它似乎不起作用(我必须不能正确地使用它)。
我对jquery的尝试如下所示，下面是.
$(function() {
$('.css-table-td').click(function() {
var theTable = $(this).closest('css-table');
var sCount = $('.highligh-cell').length;
//code below not working
//if (sCou
浏览 2提问于2015-05-04得票数 1
回答已采纳
如何利用div实现列跨
我想使用类div加入.div-table-col。
这是我的密码：
.div-table {
display: table;
width: 100%;
align: center;
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
width: 100%;
margin:10px;
}
.div-table-col {
float: left;
display: table-column;
width: 50%;
}
.div-table-c
浏览 1提问于2018-08-03得票数 0
回答已采纳
1回答
我有下面的表格设计，用CSS布局(参见第一段)。
是否有可能使同一类型/类的所有列(例如.Table_col_day)与该类型/类的列一样宽，并且具有最广泛的内容、具有CSS/不带JS？解决方案不必是基于CSS网格的。
请参阅第二个基于JS的快速解决方案代码片段，以说明我想要做的事情。
.Table__row {
background-color: plum;
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr;
}
.Table__row:nth-of-type(even) {
background-colo
浏览 10提问于2022-08-01得票数 1
回答已采纳
3回答
编辑：
我有以下HTML代码：
<div class="div-table">
<div class="div-table-row">
<div class="div-table-first-col">
<div>11:00</div>
</div>
<div class="div-table-col">
<div style="h
浏览 2提问于2016-10-08得票数 1
回答已采纳
2回答
尝试了其他文章中关于使用selenium从表中提取数据的几个例子，但是我没有让它工作。对于如何使用python从这样的表中提取数据，有什么想法吗？
<div class="js--property-table-body project-property-table__body">
<span aria-hidden="true" class="project-property-table__body__loader"></span>
<div class="property-
浏览 5提问于2021-05-25得票数 0
回答已采纳
我试图将嵌套的Wicket ListView结构显示为类似于<div>结构的html表。这是因为我希望这个表的一部分在运行时更改它的可见性，因此希望添加WebMarkContainers，然后对它们进行操作。
因为这是一个html问题，所以我开始只发布html。
<form wicket:id="matrixForm">
<div class="table">
<div class="table-header-group">
<div class
浏览 2提问于2015-09-24得票数 1
回答已采纳
3回答
我试图在css表中的每一行应用背景图像悬停效果，但需要它出现在包含元素的左侧。
有什么想法吗？
JS:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
CSS:
#container {
width: 660px;
margin: 20px aut
浏览 2提问于2011-08-17得票数 5
回答已采纳
2回答
把太多的时间花在一个简单的div表上。问题:列标题不会调整到表的宽度或行的宽度。行看起来没问题，但列标题却不行。
为了避免将固定宽度作为下一个表，我发布的表中可能有不同的列数。使用下面的代码，列标题都是左缩的，相邻的，但它们与行不匹配.
<style type="text/css">
.table-container {
display: table;
width: 50%;
table-layout: fixed;
border-collapse: collapse;
}
.table-heading {
font-w
浏览 4提问于2014-08-27得票数 1
回答已采纳
2回答
下面有一张我想从窗口转换成网页的图片。我设法完成了设计，但是我在网格(I am using data tables in bootstrap)中遇到了一个问题，我不能在图片中做这个设计。
<table>
<tr>
<td>
<div>
<input type="radio" />
Radio Button
</div>
</td>
浏览 4提问于2016-10-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
