CODEWITHSUNDEEP
htmlcss
Zoetyc
Zoetyc

Reputation: 67

Using `display:block` in td tag starts text from the top? I need to move text to the bottom

I'm trying to make the text appear like a traditional console log, appearing from the bottom and moving upwards. If I remove the display: block from the td tag in .css it moves from the bottom upwards like I want but the <td> expands the table at the top past its defined height? if I keep display: block, it doesn't expand past the table but text comes from top down. Help would be appreciated.

html :

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <div class="disable-highlight">
    <h1>DNPS</h1>
    <input id="btn" name="button" type="button" value="Start Server"/>
  </div>
  <table>
      <td id="consoleLog">
  </table>
  <script>require('./server.js')</script>
</body>
</html>

app.css :

.disable-highlight{
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

body {
  font-family: "Courier New", Courier, monospace;
  font-weight:300;
    line-height: 1.75em;
    font-size: 16px;
  text-align: center;
    background-color: #222;
    color: #aaa;
  /*-webkit-app-region: drag;*/
}

h1 {
  font-family: "Courier New", Courier, monospace;
  font-weight:300;
    line-height: 1.75em;
    font-size: 16px;
  text-align: center;
    background-color: #222;
    color: #aaa;
  -webkit-app-region: drag;
}

table {
  width: 95%;
  height: 200px;
  color: #aaa;
  border-color: #aaa;
  background-color: #292929;
  border: solid 1px;
  border-radius: 7px;
  position: absolute;
  table-layout: fixed;
  bottom: 5%;
  margin-left: 1.25%;
}

td {
  border-color: orange;
  border-style: dashed;
  height: 100%;
  text-align: left;
  overflow-y: scroll;
  display:block;
}

Upvotes: 0

Views: 837

Answers (2)

RoToRa
RoToRa

Reputation: 38431

It's very unclear what you are attempting to do.

First off, use valid HTML.

<table>
  <td id="consoleLog">
</table>

Is not valid. At the very least the td needs to be inside a table row (tr). Additionally, although not required, it's a good idea to close the table cell with a closing tag (</td>):

<table>
  <tr>
     <td id="consoleLog"></td>
  </tr>
</table>

Secondly, it makes very little sense to set a table cell to display: block. A table cell has by default display: table-cell and by overwriting that with display: block it is practically no longer a table cell.

Why are you using a table and a table cell here if you don't want it to be a table cell? Why don't you use an element such as div which has by default display: block.

Upvotes: 1

Mileta Dulovic
Mileta Dulovic

Reputation: 1064

That is because you have height: 100% on td and it will occupy whole parent and text will be only on top..

You can avoid this by putting <span></span> in that td and then position it where you want with flex or position: absolute

Hope it helped :)

Upvotes: 1

Related Questions