1

I am developing an Angular web page that has a table. I did eberything in Angular side, Now I am struggling with CSS/HTML side. I have to display the data in one column as bigger text. That means the text should fit the entire height of the table row.

So I created a fiddle (no angular included, only html and css).

Any help would be greatly appreciated.

[https://jsfiddle.net/SudhirSahoo/agxc18Ly][1]

I am using bootstrap and the screen size may differ. If I give fixed line-height in text3 css class, then it works in one screen, but in another bigger screen, it does n't look good.

In the fiddle I want to display the defects in "This Qtr" column as shown in below image. Expected

Sid
  • 89
  • 1
  • 5

3 Answers3

1

I dont think it is possible with only css, but with JS you can do it! I found a SO post about similar issue and changed it a bit to work on table cell.

So what is happening is that every resize or page load we get the height of it and set the font size to height * 2. td:nth-child(2) selects the second cell.

Second example is set to 100px height, first have have no height

var $td = $('.t1 td:nth-child(2)');

$(window).resize(function () {
   var height = $td.height();
   $td.css({
      'font-size': (height * 2) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');

var $tds = $('.t2 td:nth-child(2)');

$(window).resize(function () {
   var height = $tds.height();
   $tds.css({
      'font-size': (height * 1.5) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
.t2 td{
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="t1">
  <tr>
    <th>Company</th>
    <th>This Qtr</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>10</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>100</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

  <h4>second table</h4>
  
<table class="t2">
  <tr>
    <th>Company</th>
    <th>This Qtr</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>10</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>100</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
PEPEGA
  • 2,214
  • 20
  • 37
  • this what exactly I want, but I am new in Angular, so I find it is not straight forward to use JQuery with angular. Trying to find a way to do in Angular – Sid Oct 30 '19 at 17:48
  • Hello Sid, will this help you? https://stackoverflow.com/questions/35527456/angular-window-resize-event The solution by @pepega is changing the style on resize of window. You can write the resize function in Angular to do this. – Neha Sharma Oct 31 '19 at 05:18
  • @Sid yeah that's true, but I hope this helped a little in how to think when solving your problem. Good luck! – PEPEGA Oct 31 '19 at 07:40
  • @PEPEGA - I worke din JQuery earlier (about 3-4 years back) and used similar logic. Was wondering if anything ready-made available in HTML5/CSS3. but I will still upvote this one – Sid Oct 31 '19 at 18:40
1

You need to remove line-height: 0 and padding-top: 22px from .text-3.

Here the working code: https://codepen.io/NehhaSharma/pen/mddBvYj

I hope this will help.

Thanks,

Neha

Neha Sharma
  • 732
  • 1
  • 4
  • 13
-1

I think the below changes in the CSS file can fix the problem. 

.text3 {
        font-size: 3em;
        line-height: 0;
        padding: 15px;
    text-align: center;
}
Mohit Kumar Raj Badi
  • 14
  • 2