gpt4 book ai didi

jquery - 使用 CSS 设置 以占用 的整个宽度
转载 作者:行者123 更新时间:2023-11-28 04:10:10 25 4
gpt4 key购买 nike

我有一个表格,我正在尝试通过 CSS 使其成为一个粘性标题。

#name-list {
width: 100%;
}

td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #CCCCCC;
font-family: Arial;
font-size: 12px;
}

thead > tr > td {
font-weight: bold;
background-color: #DDDDDD;
}

tbody > tr > td {
width: 50%;
}
<table id="name-list">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>Janet</td>
<td>Wonder</td>
</tr>
<tr>
<td>Aaron</td>
<td>Main</td>
</tr>
<tr>
<td>Allan</td>
<td>Bul</td>
</tr>
<tr>
<td>Carey</td>
<td>Jay</td>
</tr>
<tr>
<td>Steve</td>
<td>Mkl</td>
</tr>
<tr>
<td>Mel</td>
<td>Jane</td>
</tr>
<tr>
<td>Jay</td>
<td>King</td>
</tr>
<tr>
<td>Jem</td>
<td>Winfred</td>
</tr>
<tr>
<td>Jaine</td>
<td>Kim</td>
</tr>
<tr>
<td>Kim</td>
<td>Joo</td>
</tr>
<tr>
<td>Jeg</td>
<td>Manik</td>
</tr>
<tr>
<td>Krist</td>
<td>Jay</td>
</tr>
<tr>
<td>Kil</td>
<td>Mofend</td>
</tr>
<tr>
<td>Wenbsi</td>
<td>Asu</td>
</tr>
</tbody>
</table>

不幸的是,在我添加了以下 CSS 属性之后,宽度不再占据整个宽度并与 body 对齐。

thead {
display: block;
position: fixed;
}

下面是我添加上述 CSS 后的样子。

#name-list {
width: 100%;
}

td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #CCCCCC;
font-family: Arial;
font-size: 12px;
}

thead {
display: block;
position: fixed;
}

thead>tr>td {
font-weight: bold;
background-color: #DDDDDD;
}

tbody>tr>td {
width: 50%;
}
<table id="name-list">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>Janet</td>
<td>Wonder</td>
</tr>
<tr>
<td>Aaron</td>
<td>Main</td>
</tr>
<tr>
<td>Allan</td>
<td>Bul</td>
</tr>
<tr>
<td>Carey</td>
<td>Jay</td>
</tr>
<tr>
<td>Steve</td>
<td>Mkl</td>
</tr>
<tr>
<td>Mel</td>
<td>Jane</td>
</tr>
<tr>
<td>Jay</td>
<td>King</td>
</tr>
<tr>
<td>Jem</td>
<td>Winfred</td>
</tr>
<tr>
<td>Jaine</td>
<td>Kim</td>
</tr>
<tr>
<td>Kim</td>
<td>Joo</td>
</tr>
<tr>
<td>Jeg</td>
<td>Manik</td>
</tr>
<tr>
<td>Krist</td>
<td>Jay</td>
</tr>
<tr>
<td>Kil</td>
<td>Mofend</td>
</tr>
<tr>
<td>Wenbsi</td>
<td>Asu</td>
</tr>
</tbody>
</table>

我知道这可以使用 jQuery 轻松完成,但我正在寻找一种 CSS 原生的方式,而不是使用 jQuery 在渲染后动态设置宽度。

感谢任何输入/反馈/建议。

谢谢。

最佳答案

这通常是通过为固定 header 使用单独的表格来实现的(例如,引用 https://datatables.net/examples/basic_init/scroll_y.html)。

当使用 position:fixed 时,单元格从表格中取出,因此不再由 tbody 单元格内容或样式的宽度决定。因此,另一种方法是明确设置它们,从而失去 % 响应能力。

#hdr-name-list {
width: 100%;
position: fixed;
margin-top: -10px
}

#name-list {
width: 100%;
padding-top: 25px
}

td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #CCCCCC;
font-family: Arial;
font-size: 12px;
}

thead>tr>td {
font-weight: bold;
background-color: #DDDDDD;
}

tbody>tr>td {
width: 50%;
}
<table id="hdr-name-list">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</thead>
<table id="name-list">
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>Janet</td>
<td>Wonder</td>
</tr>
<tr>
<td>Aaron</td>
<td>Main</td>
</tr>
<tr>
<td>Allan</td>
<td>Bul</td>
</tr>
<tr>
<td>Carey</td>
<td>Jay</td>
</tr>
<tr>
<td>Steve</td>
<td>Mkl</td>
</tr>
<tr>
<td>Mel</td>
<td>Jane</td>
</tr>
<tr>
<td>Jay</td>
<td>King</td>
</tr>
<tr>
<td>Jem</td>
<td>Winfred</td>
</tr>
<tr>
<td>Jaine</td>
<td>Kim</td>
</tr>
<tr>
<td>Kim</td>
<td>Joo</td>
</tr>
<tr>
<td>Jeg</td>
<td>Manik</td>
</tr>
<tr>
<td>Krist</td>
<td>Jay</td>
</tr>
<tr>
<td>Kil</td>
<td>Mofend</td>
</tr>
<tr>
<td>Wenbsi</td>
<td>Asu</td>
</tr>
</tbody>
</table>

关于jquery - 使用 CSS 设置 <thead> 以占用 <table> 的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42755354/

25 4 0

这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =

  • css - 嵌套table in table in table in table in table in div显示 block 不继承高度

    为什么 wrapper #4 没有继承其父表容器的高度?表格嵌套在一个显示 block 包装器中,每个嵌套的div是显示表格,每个表格继承到最里面的一个。是什么原因造成的,我该如何解决? jsfidd

  • html - Bootstrap table table-condensed table-hover,顶部边框不显示

    我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见,除非我将其大小设置为 2 px。 我该如何解决这个问题? HTML #name 1.one 2.two 3.thr

  • 数据库结构 : Relational table with more columns or relational table to a relational table?

    我正在逻辑层面上设计一个数据库,以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理,所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO

  • database - DB::table ('table' ) 和 model::('table' ) 之间的区别

    在 Laravel 上,我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别? 谢谢。 最

  • python - 在 Python 中抓取 TABLE I NEED
    之间的所有文本

    我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据,在此页面上存在一个表,id 为:main_table_countries_today其中包含我希望收集的 15x225

  • javascript - Sequelize : Many To Many table(CROSS TABLE) associated to other table

    这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>

  • javascript - "Table tr"、 "table tbody",不适用于 javascript 仅适用于 "table"

    我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时,我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同,我想将它们显示在表格之外的另一个元素中。

  • MySql 当 table.column = table.column 时选择 table.column

    假设我的数据库中有一张地铁 map ,其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH

  • css - CSS 规则 "Semantics": table, table-row, table-cell

    我最近经常使用这些属性,尤其是 display: table-cell。它在现代浏览器中得到了很好的支持,并且它对某些网格有很多好处,并且可以非常轻松地对齐内容,而无需棘手的标记。但在过去的几天里,我

  • css - 两列等高只有 css(不显示 : table, table-row, table-cell)

    在 CSS 中,我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20

  • apache-spark - spark.table ("TABLE A") 和 spark.read 之间有什么区别。 ("TABLE A")

    问题作为标题,我正在学习sparkSQL,但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.

  • Sqlite3 : Creating a new table from an old table is not populating the sqlite_sequence table correctly

    我正在尝试根据 this answer 删除表上的非空约束.但是,它似乎没有在 sqlite_sequence 中创建条目。这样做之后,即使我可以在使用测试表时让它正常工作。 有趣的是,如果我备份我的

  • javascript - sap.m.Table 中是否有多个标题,如 sap.ui.table.Table?

    var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t

  • Mysql (select a.id from table a) 和 (select table.id from table) 之间的区别

    下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉,如果我的问题重复)。 最佳答案 完

  • css - 为什么 table::after 元素是在 table > td 元素之后创建的,而不是 table 元素?

    我尝试在表格后添加点,方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效,但似乎在第一个表格列之后添加了点,而不是

  • mysql - 数据库设计 : Multiple join tables or one table with identifying 'table' column

    我正在设计一个可以标记任何内容的数据库,我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎,希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag

  • html - CSS table-cell 中的 table 元素偏移其他 table-cell 内容

    "center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么?如何在不要求在我的表格前添加“虚

  • html - 我可以替换 ' with `
    ` + css: ` table{...}` 吗?

    table{border:1px solid #000;}没有 border=1 似乎无法工作陈述。与更改 的方式相同进入input{width:400px;} , 我想用 并仅在 css 中声明边

  • iPhone个性 table 圆角 table

    我对 iPhone 屏幕设计没有太多经验,但我需要制作一个像这样的表格:(图片),我进行了调查,但没有找到任何东西。该表需要有一个圆角,用户将能够插入数据,在本例中是名字、姓氏等......现在我使用