CODEWITHSUNDEEP
javascripthtmlcsspositionoverflow
Sara
Sara

Reputation: 53

HTML/CSS: How to make paragraphs when text content is overflowing?+more problems

var array = [1,2,3,4,"666666666666666666666+3=123456678"];
var table = document.createElement('TABLE');
    var tableBody = document.createElement('TBODY');
        table.border = '0';
        table.appendChild(tableBody);
        
function makeArr()
{
        var myTableDiv = document.getElementById("myTable1");
        tableBody.innerHTML = "";
            
        for(var i=0;i<array.length;i++)
        {
            
        var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            
        var td = document.createElement('TD')
            td.width = '275';
            
            td.appendChild(document.createTextNode(array[i]));

            tr.appendChild(td);
            myTableDiv.appendChild(table);
        }
        
    var z = document.getElementById("myTable1");
    var tablewidth = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('width');
    var tableheight = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('height');
    z.style.height = tableheight;
    z.style.width = tablewidth;
}
#myTable1,
#myTable2{
    background: #EEEEEB;
    width: 100;
    border: none;
    float: left;
    position: relative;
}

#myTable1 td,
#myTable2 td{
    text-align: right;
    overflow: auto;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button"value="MakeTable"onClick="makeArr()">
<div class="tables" id="tables" >
    <div id="myTable1">

    </div>
    
    <table id="myTable2">
    <th>Always here,same size</th>
        <tr>
        <td>1</td>
        </tr>
        <tr>
        <td>2</td>
        </tr>
        <tr>
        <td>3</td>
        </tr>
        <tr>
        <td>4</td>
        </tr>

    </table>
</div>
</body>

Hey guys! I hope someone can help me with a couple questions/problems:)

The main objective is to make myTable1 the same size of myTable2(which is supposed to have always the same size). If myTable1 overflows in width, I want it to make a new paragraph with the content and If it overflows in height, just make it scrollable. Does this even work with css overflow(I didnt find anything to put the content in a new paragraph)?

Sorry for the many questions and confusion...Im also very open for any other usefull suggestions and help=)

Upvotes: 1

Views: 302

Answers (1)

mttetc
mttetc

Reputation: 745

A few things :

var array = [1,2,3,4,"666666666666666666666+3=123456678"];
var table = document.createElement('TABLE');
    var tableBody = document.createElement('TBODY');
        table.border = '0';
        table.appendChild(tableBody);
        
function makeArr()
{
        var myTableDiv = document.getElementById("myTable1");
        tableBody.innerHTML = "";
            
        for(var i=0;i<array.length;i++)
        {
            
        var tr = document.createElement('TR');
            tableBody.appendChild(tr);
            
        var td = document.createElement('TD')
            td.width = '275';
            
            td.appendChild(document.createTextNode(array[i]));

            tr.appendChild(td);
            myTableDiv.appendChild(table);
        }
        
    var z = document.getElementById("myTable1");
    var tablewidth = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('width');
    var tableheight = getComputedStyle(document.getElementById("myTable2")).getPropertyValue('height');
    z.style.width = tablewidth;
    z.style.height = tableheight;
}
.tables {
  display: flex;
}

#myTable1,
#myTable2{
    background: #EEEEEB;
    border: none;
    position: relative;
    overflow-y: auto
}

#myTable1 td,
#myTable2 td{
    text-align: right;
    word-break: break-all;
}
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button"value="MakeTable"onClick="makeArr()">
<div class="tables" id="tables" >
    <div id="myTable1">

    </div>
    
    <div id="myTable2">
      <table id="myTable2">
      <th>Always here,same size</th>
          <tr>
          <td>1</td>
          </tr>
          <tr>
          <td>2</td>
          </tr>
          <tr>
          <td>3</td>
          </tr>
          <tr>
          <td>4</td>
          </tr>

      </table>
   </div>
</div>
</body>

Upvotes: 1

Related Questions