如何在Chrome中显示宽度为100％的表格

我在调试并扩展快速应用程序，该应用程序在页面上的一系列嵌套表格中显示数据集。最初，所有的CSS都位于HTML文件头标记中的样式标记中，并且表格在页面宽度的100％内显示正确。当CSS是它的工作在同一页上，这是用来管理我们试图显示元素的宽度CSS：如何在Chrome中显示宽度为100％的表格

li.dir span { 
    color: black; 
    cursor: auto; 
    -webkit-box-sizing: border-box ; 
    -moz-box-sizing: border-box ; 
    box-sizing: border-box ; 
    width: 100%; 
}

现在，我脱掉了风格标签和移动的CSS到它自己的文件，宽度：100％风格不显示。

我检查了DevTools内部的问题，当我看到li.dir跨度类时，Chrome和IE都消除了宽度：100％属性。

我知道宽度由父元素管辖所以我曾尝试添加风格=宽度：100％属性到每个父元素，以尝试蛮力该特定样式属性，但我仍然无法找到在哪里使这个特定的CSS属性工作。

这里是父母的div支配凡在我的身体在创建表：

<div id="url"></div> 
<div class="create"></div>

我发现这个问题有一个事实，即应用程序被动态地插入DOM元素做。不知何故，Chrome将一个style =“display：inline-block属性添加到一个定位标记中，该定位标记充当我的表数据的父对象。问题是我找不到添加它的位置，因为当我更改唯一的位置时与此属性我的HTML文件，宽度：100％它仍会出现

我的猜测是，显示：。inline-block的正在从引导继承，但是这只是一个猜测

这里是我的代码处理插入父元素正如你所看到的，我试图消除显示：inline-block为了使宽度为100％。我的代码中没有display：inline-block，但它仍然是默认情况下会添加，我该如何摆脱它？看看我的代码：

table += 
'<ul>' + 
    '<li class="dir" id="' + title + '">' + 

     // This is the anchor tag in question 
     '<a id="' + title + 'focus" style="width: 100%;"></a>' + 
     title + 
     '<span>' + 
      '<ul>' + 
       '<li id=\"' + title + "Table" + '\"></li>' + 
      '</ul>' + 
     '</span>' + 
    '</li>' + 
'</ul>'; 
} 
tabobj.push(title);

下面是它看起来像在DevTools：

为什么会在我的班上做时，它的风格标签在同一个HTML文件，而不是在一个单独的CSS文件？

另外，我该如何摆脱该显示：内嵌块设置Chrome和IE似乎默认添加？

请让我知道如果你能帮助我在这一个，谢谢！

下面是该项目的链接codePen：https://codepen.io/lopezdp/pen/GEzwmP

来源

2017-07-13 lopezdp

您是否尝试过清除缓存？ – ThisGuyHasTwoThumbs

由于只有'color'和'cursor'通过了，我猜你的CSS格式不正确，导致剩下的规则被丢弃。 – APAD1

凯文，没有看到您的代码 – Daniel

所以我跟踪下来，并开始尝试不同的解决方案，我能解决这个问题。

感谢您帮助确定要采取的方向。下面的锚定标记显示了我为了解决这个问题而改变了我的HTML：

'<a id="' + title + 'focus" style="width: 100%; display: none; overflow: auto;"></a>'

来源

2017-07-13 18:55:38 lopezdp

如何在Chrome中显示宽度为100％的表格

回答

相关问题