语义UI - 调整制表符/ div以适合动态表

问题描述：

我正在使用语义UI，但这可能是一个更一般的问题。我创建了一组选项卡（见下文）。然后我动态地加载一个表格的标签。表格比标签宽（见下文） - 有没有办法让标签调整到表格？这只是小型（移动）设备的一个问题。我想也许可以使用jQuery，但似乎无法获得任何工作。语义UI - 调整制表符/ div以适合动态表

编辑：添加片段，但不知道它的可以看到这个问题的片段工具

EDIT2：增加了前，后的jQuery .WIDTH（）控制台日志片段。宽度马克塞斯480无论我把什么价值。

<div class="ui top attached tabular menu"> 
    <a class="active item" data-tab="Fixtures" data-vivaldi-spatnav-clickable="1">Fixtures</a> 
    <a class="item" data-tab="Standings" data-vivaldi-spatnav-clickable="1">Standings</a> 
    <a class="item" data-tab="Stats" data-vivaldi-spatnav-clickable="1">Stats</a> 
</div> 
<div class="ui bottom attached active tab segment" data-tab="Fixtures"> 
    <div id="showFixtures"></div> 
</div> 
<div class="ui bottom attached tab segment" data-tab="Standings"> 
    <div id="showStandings"></div> 
</div> 
<div class="ui bottom attached tab segment" data-tab="Stats"> 
    Stats 
</div>

var jData = [{ 
 
    "name": "John", 
 
    "age": 30, 
 
    "cars": "Ford", 
 
    "Longer Title": "Longer text", 
 
    "Longer Title2": "Longer text", 
 
    "Longer Title3": "Longer text", 
 
    "Longer Title2a": "Longer text" 
 
}]; 
 

 
console.log("Before: " + $('.ui.menu').width()); 
 

 
$('.ui.menu').width(800); 
 

 

 
console.log("After: " + $('.ui.menu').width()); 
 

 
$('.menu .item') 
 
    .tab(); 
 
div_id = "showFixtures"; 
 
CreateTableFromJSON(jData, div_id) 
 

 
function CreateTableFromJSON(jData, div_id) { 
 
    // EXTRACT VALUE FOR HTML HEADER. 
 
    var col = []; 
 
    for (var i = 0; i < jData.length; i++) { 
 
    for (var key in jData[i]) { 
 
     if (col.indexOf(key) === -1) { 
 
     col.push(key); 
 
     } 
 
    } 
 
    } 
 

 
    // CREATE DYNAMIC TABLE. 
 
    var table = document.createElement("table"); 
 
    table.id = "dp"; 
 
    table.className = "ui collapsing striped blue table unstackable"; 
 

 
    var thead = table.appendChild(document.createElement("thead")); 
 

 
    var tbody = table.appendChild(document.createElement("tbody")); 
 

 
    var thr = thead.insertRow(-1); // TABLE ROW. 
 

 
    for (var i = 0; i < col.length; i++) { 
 
    var th = document.createElement("th"); // TABLE HEADER. 
 
    th.className = "collapsing"; 
 
    th.innerHTML = col[i]; 
 
    thr.appendChild(th); 
 
    } 
 

 
    // ADD JSON DATA TO THE TABLE AS ROWS. 
 
    for (var i = 0; i < jData.length; i++) { 
 

 
    var tr = tbody.insertRow(-1); 
 

 
    for (var j = 0; j < col.length; j++) { 
 
     var tabCell = tr.insertCell(-1); 
 
     tabCell.className = "collapsing"; 
 
     tabCell.innerHTML = jData[i][col[j]]; 
 
    } 
 
    } 
 

 
    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
 
    var divContainer = document.getElementById(div_id); 
 
    divContainer.innerHTML = ""; 
 
    divContainer.appendChild(table); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" /> 
 
<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="ui top attached tabular menu"> 
 
    <a class="active item" data-tab="Fixtures" data-vivaldi-spatnav-clickable="1">Fixtures</a> 
 
    <a class="item" data-tab="Standings" data-vivaldi-spatnav-clickable="1">Standings</a> 
 
    <a class="item" data-tab="Stats" data-vivaldi-spatnav-clickable="1">Stats</a> 
 
    </div> 
 
    <div class="ui bottom attached active tab segment" data-tab="Fixtures"> 
 
    <div id="showFixtures"></div> 
 
    </div> 
 
    <div class="ui bottom attached tab segment" data-tab="Standings"> 
 
    <div id="showStandings"></div> 
 
    </div> 
 
    <div class="ui bottom attached tab segment" data-tab="Stats"> 
 
    Stats 
 
    </div> 
 

 
</body>

尝试添加你的一切都在这里的代码，使一个可运行的代码片断？ –

答

你应该能够做这与jQuery使用width()。例如，如果你想调整选项卡中点击“日程”选项卡时，你可以这样做：

$('.item[data-tab="Fixtures"]').click(function() { 
    $('.ui.menu').width($('#showFixtures').width()); 
}

我试过，但是当我登录到控制台它说ui.menu宽度未定义 – SimpleOne

我已经添加了一个id到各种类，然后只是改变宽度，但没有效果。 Chrome检查员告诉我这个班级是“ui底部附加的活动标签段”，但是改变这个不会“粘住”。 – SimpleOne

语义UI - 调整制表符/ div以适合动态表

相关推荐