如何修改html表格宽度,如何设置HTML表格的动态高度和宽度？

最新推荐文章于 2023-03-27 11:16:39 发布
最新推荐文章于 2023-03-27 11:16:39 发布
阅读量617 收藏
点赞数 1
文章标签： 如何修改html表格宽度

您的第一个错误Vivek使用Bootstrap进行响应。

您的第二种想法是，响应式是某种魔术，例如FixedColumns之类的插件将在任何情况下都可以解决。

响应式设计是一个设计问题，因此必须在决定甚至要为项目使用哪种技术之前加以解决。应该对每种设备格式的数据表的外观进行设计。

但是，我将告诉您如何修复Firefox错误。您只需要将此代码添加到CSS中即可：

.DTFC_LeftBodyLiner {

overflow-y: initial!important;

width: auto!important;

}

更新：在聊天中我们进行了交谈之后，我了解了您使用滚动条时遇到的其他问题。解决方案是删除引导响应表的组合：

并将其宽度修改div.dataTables_wrapper为100％并添加以下CSS：

.table.DTFC_Cloned {

background-color: #fff;

}

还

标签更改了#tblOlcounterWise标签，因为将
标签直接嵌入时会出现语法错误

function format(number, decimals = 2, locale = 'en-in') {

const fixed = parseInt(number).toFixed(decimals);

const [int, dec] = fixed.split('.')

const intFormatted = (+int).toLocaleString(locale)

return intFormatted + (dec ? '.' + dec : '');

}

var data = [{

"amount": 135116,

"billdate": "2018-08-04",

"counter": "South Indian-1-Flr",

"outlet": "JAYANAGAR"

},

{

"amount": 133350,

"billdate": "2018-08-04",

"counter": "South Indian-2-Flr",

"outlet": "JAYANAGAR"

},

{

"amount": 89092,

"billdate": "2018-08-04",

"counter": "Take-away counter 1",

"outlet": "JAYANAGAR"

},

{

"amount": 61661,

"billdate": "2018-08-04",

"counter": "Coffee Counter",

"outlet": "JAYANAGAR"

},

{

"amount": 80568,

"billdate": "2018-08-04",

"counter": "Trade Pos1",

"outlet": "JAYANAGAR"

},

{

"amount": 18425,

"billdate": "2018-08-04",

"counter": "Trade Pos 2",

"outlet": "JAYANAGAR"

},

{

"amount": 64091,

"billdate": "2018-08-04",

"counter": "Restaurant",

"outlet": "MALLESHWARAM"

},

{

"amount": 16234,

"billdate": "2018-08-04",

"counter": "Coffee Counter",

"outlet": "MALLESHWARAM"

},

{

"amount": 6233,

"billdate": "2018-08-04",

"counter": "Takeaway",

"outlet": "MALLESHWARAM"

},

{

"amount": 18243,

"billdate": "2018-08-04",

"counter": "Trade POS",

"outlet": "MALLESHWARAM"

},

{

"amount": 69946,

"billdate": "2018-09-02",

"counter": "Restaurant",

"outlet": "MALLESHWARAM"

},

{

"amount": 18197,

"billdate": "2018-09-02",

"counter": "Coffee Counter",

"outlet": "MALLESHWARAM"

},

{

"amount": 8741,

"billdate": "2018-09-02",

"counter": "Takeaway",

"outlet": "MALLESHWARAM"

},

{

"amount": 18820,

"billdate": "2018-09-02",

"counter": "Trade POS",

"outlet": "MALLESHWARAM"

},

{

"amount": 78537,

"billdate": "2018-09-02",

"counter": "Restaurant",

"outlet": "KOLAR"

},

{

"amount": 5060,

"billdate": "2018-09-02",

"counter": "Trade POS",

"outlet": "KOLAR"

},

{

"amount": 49096,

"billdate": "2018-09-03",

"counter": "Take-away counter 1",

"outlet": "JAYANAGAR"

},

{

"amount": 58477,

"billdate": "2018-09-03",

"counter": "Coffee Counter",

"outlet": "JAYANAGAR"

},

{

"amount": 49933,

"billdate": "2018-09-03",

"counter": "Trade Pos1",

"outlet": "JAYANAGAR"

},

{

"amount": 9915,

"billdate": "2018-09-03",

"counter": "Trade Pos 2",

"outlet": "JAYANAGAR"

},

{

"amount": 51209,

"billdate": "2018-09-03",

"counter": "Restaurant",

"outlet": "KOLAR"

},

{

"amount": 2566,

"billdate": "2018-09-03",

"counter": "Trade POS",

"outlet": "KOLAR"

},

{

"amount": 19602,

"billdate": "2018-09-04",

"counter": "North Indian",

"outlet": "JAYANAGAR"

},

{

"amount": 84490,

"billdate": "2018-09-04",

"counter": "South Indian-1-Flr",

"outlet": "JAYANAGAR"

},

{

"amount": 47952,

"billdate": "2018-09-04",

"counter": "Take-away counter 1",

"outlet": "JAYANAGAR"

},

{

"amount": 56191,

"billdate": "2018-09-04",

"counter": "Coffee Counter",

"outlet": "JAYANAGAR"

},

{

"amount": 56829,

"billdate": "2018-09-04",

"counter": "Trade Pos1",

"outlet": "JAYANAGAR"

},

{

"amount": 4648,

"billdate": "2018-09-04",

"counter": "Trade Pos 2",

"outlet": "JAYANAGAR"

},

{

"amount": 26051,

"billdate": "2018-09-04",

"counter": "Restaurant",

"outlet": "MALLESHWARAM"

},

{

"amount": 14206,

"billdate": "2018-09-04",

"counter": "Coffee Counter",

"outlet": "MALLESHWARAM"

},

{

"amount": 4322,

"billdate": "2018-09-04",

"counter": "Takeaway",

"outlet": "MALLESHWARAM"

},

{

"amount": 14271,

"billdate": "2018-09-04",

"counter": "Trade POS",

"outlet": "MALLESHWARAM"

},

{

"amount": 82248,

"billdate": "2018-09-04",

"counter": "Restaurant",

"outlet": "KOLAR"

},

{

"amount": 751,

"billdate": "2018-09-04",

"counter": "Trade POS",

"outlet": "KOLAR"

}

]

function formatData(data) {

let toReturn = [];

let dateWiseObj = {};

let maxUniqueForOutlets = {};

data.forEach(function(d) {

if (!maxUniqueForOutlets[d["outlet"]]) {

maxUniqueForOutlets[d["outlet"]] = [];

}

if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {

maxUniqueForOutlets[d["outlet"]].push(d["counter"]);

}

if (!dateWiseObj[d["billdate"]]) {

dateWiseObj[d["billdate"]] = {};

dateWiseObj[d["billdate"]][d["outlet"]] = {};

dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;

} else {

if (!dateWiseObj[d["billdate"]][d["outlet"]]) {

dateWiseObj[d["billdate"]][d["outlet"]] = {};

dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;

} else {

if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {

dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;

}

}

}

});

return {

dateWiseObj: dateWiseObj,

maxUniqueForOutlets: maxUniqueForOutlets

};

};

function addTable(dataObj) {

let dateWiseObj = dataObj.dateWiseObj;

let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;

let table = document.createElement("table");

let thead = document.createElement("thead");

let headerRow = document.createElement("tr");

let th = document.createElement("th");

th.innerHTML = "Outlet";

th.classList.add("text-center");

headerRow.appendChild(th);

th = document.createElement("th");

th.innerHTML = "Totals";

th.classList.add("text-center");

headerRow.appendChild(th);

Object.keys(maxUniqueForOutlets).forEach(function(d) {

th = document.createElement("th");

th.innerHTML = d; // ol names

th.classList.add("text-center");

th.colSpan = maxUniqueForOutlets[d].length + 1;

headerRow.appendChild(th);

});

thead.appendChild(headerRow);

headerRow = document.createElement("tr");

th = document.createElement("th");

th.innerHTML = "BillDate";

th.classList.add("text-center");

headerRow.appendChild(th);

th = document.createElement("th");

th.innerHTML = "Counter";

th.classList.add("text-center");

headerRow.appendChild(th);

Object.keys(maxUniqueForOutlets).forEach(function(k) {

th = document.createElement("th");

th.innerHTML = "Total";

th.classList.add("text-center");

headerRow.appendChild(th);

maxUniqueForOutlets[k].forEach(function(d) {

th = document.createElement("th");

th.innerHTML = d; //counters name

th.classList.add("text-center");

headerRow.appendChild(th);

});

});

thead.appendChild(headerRow);

table.appendChild(thead);

let tbody = document.createElement("tbody");

headerRow = document.createElement("tr");

let completeTotal = 0;

let outletandCounterWiseCompleteTotal = {};

Object.keys(dateWiseObj).forEach(function(k) {

let row = document.createElement("tr");

let td = document.createElement("td");

td.innerHTML = k; //billdate

row.appendChild(td);

grandTotal = 0;

outletWiseTotal = {};

Object.keys(maxUniqueForOutlets).map(function(d) {

if (!outletandCounterWiseCompleteTotal[d])

outletandCounterWiseCompleteTotal[d] = {};

outletWiseTotal[d] = 0;

if (dateWiseObj[k][d]) {

Object.keys(dateWiseObj[k][d]).forEach(function(i) {

if (outletandCounterWiseCompleteTotal[d][i]) {

outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");

} else {

outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");

}

outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");

});

}

if (outletandCounterWiseCompleteTotal[d]["total"])

outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];

else

outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];

grandTotal += outletWiseTotal[d];

});

td = document.createElement("td");

td.innerHTML = grandTotal.toLocaleString('en-IN');

td.classList.add("text-right"); //grandTotal full column

row.appendChild(td);

Object.keys(maxUniqueForOutlets).map(function(d) {

td = document.createElement("td");

td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN');

td.classList.add("text-right"); //outlet total

row.appendChild(td);

if (dateWiseObj[k][d]) {

maxUniqueForOutlets[d].forEach(function(i) {

td = document.createElement("td");

td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0";

td.classList.add("text-right"); //all total

row.appendChild(td);

});

} else {

maxUniqueForOutlets[d].forEach(function(i) {

td = document.createElement("td");

td.innerHTML = "0";

td.classList.add("text-right");

row.appendChild(td);

});

}

});

tbody.appendChild(row);

completeTotal += grandTotal;

//console.log(outletWiseTotal);

});

th = document.createElement("th");

th.innerHTML = "Total";

headerRow.appendChild(th);

th = document.createElement("th");

th.innerHTML = completeTotal.toLocaleString('en-IN');

th.classList.add("text-right"); //complete total of all

headerRow.appendChild(th);

Object.keys(maxUniqueForOutlets).forEach(function(d) {

if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {

th = document.createElement("th");

th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN');

th.classList.add("text-right");

headerRow.appendChild(th);

} else {

th = document.createElement("th");

th.innerHTML = 0;

headerRow.appendChild(th);

}

maxUniqueForOutlets[d].forEach(function(i) {

if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {

th = document.createElement("th");

th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN');

th.classList.add("text-right");

headerRow.appendChild(th);

} else {

th = document.createElement("th");

th.innerHTML = 0;

headerRow.appendChild(th);

}

});

});

thead.appendChild(headerRow);

table.appendChild(tbody);

let divContainer = document.getElementById("tblOlcounterWise");

divContainer.innerHTML = "";

divContainer.appendChild(table);

table.classList.add("table");

table.classList.add("table-striped");

table.classList.add("table-bordered");

table.classList.add("table-hover");

var $winHeight = $(document).height();

var $bodyHeight = $winHeight - 90;

$(table).DataTable({ //adding datatabl functionality

"scrollX": true,

"scrollY": $bodyHeight + "px",

"scrollCollapse": true,

"paging": false,

"info": false,

"ordering": false,

"searching": false,

fixedColumns: {

leftColumns: 2

}

});

}

var dataObj = formatData(data);

addTable(dataObj);

div.dataTables_wrapper {

width: 100%;

/*how to make this dynamic*/

margin: 0 auto;

}

table {

border-collapse: collapse;

}

table.table-bordered>thead>tr>th {

border: 1px solid white;

white-space: nowrap;

font-family: Verdana;

font-size: 9pt;

padding: 5px 5px 5px 5px;

background-color: rgba(29, 150, 178, 1);

font-weight: normal;

text-align: center;

color: white;

}

table.table-bordered>tbody>tr>td {

border: 1px solid rgba(29, 150, 178, 1);

white-space: nowrap;

font-family: Verdana;

font-size: 8pt;

background-color: rgba(84, 83, 72, .1);

padding: 5px 5px 5px 5px;

color: black;

}

.DTFC_LeftBodyLiner {

overflow-y: initial!important;

width: auto!important;

}

.table.DTFC_Cloned {

background-color: #fff;

}

罗德呀
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 表格单元格的宽度和高度的设置方法
09-22
做网页的时候，经常会碰到表格宽度对不齐的问题，遇到这种问题怎么处理呢？下面小编给大家介绍下html 表格单元格的宽度和高度的设置方法，一起看看吧
html 表格单元格的宽度和高度如何设置
xiaoweids的博客
05-18 8747
先看td的width吧，某一个td的width是和所处的一列每个td的width都相关的，取其中最大的width作为这一列中每个td的width，这点是让我们最混淆的地方，一定要从全局把握某个td的width，不能从这一个的width设置就断言它的宽度就是多少，这样是不准确的。还有一点要注意，就是td的height和tr的height之间的关系。当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。
html table高度设置
super_XYQ的博客
04-06 7027
被一个莫名其妙的问题耽误了好久 表格行数太多时，表格会自动增加高度，设置height、max-height、overflow都不管用 原来table的height属性代表的是高度最小值 正确解决方法： 用div包裹table，设置div的height和overflow 就能试表格出现滚动条了 <div style="height: 400px;overflow:auto;"> <table id="eventTable" cellspacing="0" ce
html语言怎么设置设置表格行高,html语言怎么设置设置表格行高？
weixin_33245447的博客
06-02 1515
满意答案ostmh2020.01.12采纳率：58%等级：8已帮助：60人width="50">**1、table中的width和height设置及其作用：table中设置的height其实是设置一个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，当表格中的内容或者行高没有达到这个值时，会自动扩大到这个值。table中设置的width值一般为...
html调整行高,html设置行高 html语言怎么设置设置表格行高？
weixin_39710660的博客
06-21 5182
html语言怎么设置设置表格行高？小编真的喜欢你，闭上眼，以为小编能忘记，但流下的眼泪，却没有骗到自己小编知道表格列宽是用来调整列宽，那么行高怎么设置啊？床前明月光，××躺中央，人多轮流上，人少小编坐庄。需要准备的材料分别有：电脑、浏览器、html编辑器。首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。 自己努力创造想要的生活，不对别人有任何期待。在ind...
两种方法设置html表格的宽高
热门推荐
小宝儿的学习之路
06-24 2万+
文章目录第一种方法第二种方法（利用css） 第一种方法 第二种方法（利用css） 1、使用border属性设置表格的边框 2、给table表格设置一个class属性，设置为“mytable” 3、在css标签内，通过class设置table表格的样式，使用width属性定义表格的宽度为400px，使用height属性定义表格的高度为300px 4、在浏览器打开该html文件，查看效果，如下： ...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
默认情况下，表格的宽度和高度根据内容自动调整，我们也可以手动设置表格的宽度和高度。 基本语法 语法解释 通过WIDTH属性定义表格的宽度，HEIGHT属性定义表格的高度，单位是像素或百分比。如果是百分比，则可分为...
HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
09-28
默认情况下，表头的宽度高度根据内容自动调整，我们也可以手动设置表头的宽度和高度。基本语法语法解释通过属性定义表头的宽度，属性定义表头的高度，单位为像素或百分比。文件范例：10-39.htm设定表头的宽度和
html表格怎么设置间距,HTML表格间距怎么设置
weixin_39910963的博客
06-17 1万+
1 回答2021-05-06 浏览：24 分类：其他问题回答：1、CSS法可以在标签中设置margin属性，即：style="margin:5px 0 5px 0;"(顺序：上、右、下左，亦可简写为style="margin: 5px 0;")，这段CSS的作用是在当前表格外部的上下各留出5px的空白。2、空对象法1)空行。还可以在表格后敲回车换行，产生(2)空表格。插入一个1行1列的表格，设置单...
html怎么修改表格高度,HTML调整表格的高度
weixin_39603476的博客
06-03 1368
在我的HTML页面上，我在侧面有两个表，在中心有一个div，其中包含许多元素(文本，图像，列表，ecc)。我要相对于页面中央部分(div)的高度调整两个表格的高度。能帮我吗？这是代码示例.tablaterale {font-size: 50%;font-family: Bahnschrift;color: white;vertical-align: text-top;height: inherit...
html设置表格高宽的代码_怎么设置HTML页面自适应宽度的table(表格)(一)
weixin_39880621的博客
12-21 4641
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。第一种方法：做一个网页解决问题(长了点)如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。一、消...
动态调整div大小 html,如何动态的根据用户屏幕的分辨率改变div的大小？
weixin_35599378的博客
06-09 691
我想设计一个 app 产品主页，主页分 3 屏，要求网页会根据用户设备的分辨率自动调整每一屏的大小，例如我现在的 1366*768 则每屏显示 1366*768；如果另外有用户的分辨率是 1280*768 则显示 1280*768。而且下面的代码好像不能改变，请教大神们叫我怎么做！谢谢了！html:123css:.test1 {margin:0px;padding:0px;width:100%;b...
html中动态计算页面的宽度
jiulinghouxiao的博客
08-31 330
html中动态计算页面的宽度
html怎么动态计算高度,html-在这种情况下如何计算高度？
weixin_35133280的博客
06-09 621
对于第一种情况,它是关于flexBox的默认对齐方式,即stretch.因此所有元素都将拉伸以适合container1的高度,因此菜单的高度与内容的高度相同.换句话说,最高的元素将定义高度,而另一个将拉伸以适合该高度.@H_301_2@更改对齐方式,您将不再有此行为：@H_301_2@@H_301_2@html,body {height: 100%;}.app {display: flex;ali...
动态设置页面表格高度
zengdaoqiang的博客
03-27 136
/ 监听页面窗口缩放时设置高度。
html 动态宽度高度,带溢出的html + css动态宽度
weixin_35539198的博客
06-07 183
Testing Columns#a { float: left; }#b { overflow: hidden; }This isSome variable widthcontentfor testingstuffLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris erat, porta et pulvi...
HTML5+CSS3
BUG_devil的博客
03-07 646
HTML5+CSS3
el-table 动态修改高度， 封装mixins
Li_Ning21的博客
08-23 405
mixins如下，通过监听页面的resize事件，当页面视窗大小变化的时候， 动态将当前视窗高度减去固定的高度值，使得table能够动态滑动。 export default (config) => { const { subtractHeight = 250, } = config; return { data() { return { subtractHeight, // 列表高度 tableHeight: `$
html表格的宽度和高度的两种设置方式及名自的特点是什么?
最新发布
08-30
在HTML中，表格的宽度和高度可以通过以下两种方式进行设置： 1. 使用CSS样式：可以通过CSS样式表中的width和height属性来设置表格的宽度和高度。通过这种方式，可以将表格的宽度和高度设置为固定的像素值或百分比。 特点：灵活性高，可以根据需要自定义表格的宽度和高度。可以根据不同的设备和屏幕大小进行响应式布局，从而在不同设备上实现更好的显示效果。 2. 使用HTML属性：也可以通过在表格的HTML标签中直接使用width和height属性来设置表格的宽度和高度。 特点：简单方便，不需要额外的CSS样式表。适用于简单的表格布局，对于复杂的布局可能会稍显不足。在响应式设计中可能不够灵活，不能根据设备和屏幕大小自动调整。 总的来说，使用CSS样式设置表格宽度和高度具有更大的灵活性和可定制性，适用于更复杂的布局需求和响应式设计。而直接在HTML标签中使用属性设置表格的宽度和高度则更为简单直接，适用于简单布局需求。具体使用哪种方式取决于实际需求和个人偏好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值