Программируемые логические устройства могут быть использованы в качестве замены логических элементов и чипов MSI?

Это был сложный вопрос. Я думаю, что у меня, наконец, есть решение, которое удовлетворяет полные требования: вертикальная и горизонтальная динамическая таблица с прокруткой (динамическая, потому что вы можете изменить количество строк и столбцов, а ни одна ячейка не имеет фиксированной ширины или высоты).

HTML и CSS-макет довольно просты, как говорили другие люди. Ключевой проблемой является перерасчет (JavaScript) ширины ячеек. И чтобы убедиться, что горизонтальная прокрутка работает, я также пересчитываю ширину теадера и tbody.

Вот скрипка https://jsfiddle.net/jmarcos00/6hv0dsj8/1/

Код HTML:

  

    

      

        
header one
        
two
        
header three
        
header one
        
two
        
header three
      
    
    

      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
      

        
one
        
data two
        
three
        
one
        
data two
        
three
      
    
  

Код CSS:

/* table border rule */
table, td, th { border: 1px solid black; }

/* display as block plus display vertical scroll bars */
thead, tbody { display: block; overflow-y: scroll; }

/* sample height */
tbody { height: 100px; }

/* sample width and horizontal scroll bar */
div { width: 200px; overflow-x: auto; }

Код JavaScript:

var i, w, wtot, thtot, thw, tdw, theadtr, tbodytr;
var th_rect, td_rect, theadtr_rect, tbodytr_rect;
var safe = new Array();

// get thead and tbody
var mythead = document.getElementById("mythead");
var mytbody = document.getElementById("mytbody");

// get first tr of thead and tbody
theadtr = mythead.children[0];
tbodytr = mytbody.children[0];
theadtr_rect = theadtr.getBoundingClientRect();
tbodytr_rect = tbodytr.getBoundingClientRect();

// get width difference of longer first tr
//   difference between tr and parent
if (tbodytr_rect.width > theadtr_rect.width)
    wtot = mytbody.getBoundingClientRect().width - tbodytr_rect.width;
else
    wtot = mythead.getBoundingClientRect().width - theadtr_rect.width;

// get width difference between tr and total th width (first step)
thtot = theadtr_rect.width;

// get th thead array and td tbody array
theadtr = theadtr.children;
tbodytr = tbodytr.children;

// get loop
for (i = 0; i < theadtr.length; i++)
{
    // second step for width difference between tr and total th width
    th_rect = theadtr[i].getBoundingClientRect();
    td_rect = tbodytr[i].getBoundingClientRect();
    thtot -= th_rect.width;

    // get width of each th and first row td (without paddings etc)
    tdw = parseFloat(window.getComputedStyle(tbodytr[i]).getPropertyValue("width"));
    thw = parseFloat(window.getComputedStyle(theadtr[i]).getPropertyValue("width"));

    // get bigger width
    w = (tdw > thw) ? tdw : thw;
    safe.push(w);

    // add to width total (decimal value with paddings etc)
    w = (tdw > thw) ? td_rect.width : th_rect.width;
    wtot += w;
}

// consider tr width and total th width difference
wtot += thtot;

// set loop
for (i = 0; i < theadtr.length; i++)
{
    // set width to th and first row td
    w = safe[i] + "px";
    theadtr[i].style.width = w;
    tbodytr[i].style.width = w; 
}

// set width for thead and tbody
wtot = wtot + "px";
mythead.style.width = wtot;
mytbody.style.width = wtot;