如何在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％的表格

回答

相關問題