CODEWITHSUNDEEP
htmlcsshtml-tablecss-position
JMV12
JMV12

Reputation: 1035

HTML Table Sizing With Different Client Window Sizes

I'm trying to create an HTML scheduling app that sizes the created tables to fit the the screen while maintaining its same size ratio. It looks fine when I have it fullscreen: Fitted Fullscreen Image. But when I resize the window or someone with a different screen resolution runs it, the positioning of the tables messes up like so: Table Positioning Incorrect.

I was wondering if there was something I could do in my CSS or JavaScript files that would ensure that the ratio and relative positioning of each table remained the same no matter what screen size or resolution it is ran on. I'll include a JSFiddle for further understanding here:

CSS for Tables and Positioning:

/* To control the style of the overall table class */
table {
  border: 0.0625em solid black;
  text-align: center;
  table-layout: fixed;
}

th, td {
  border: 0.0625em solid black;
  width: 8.75em;
  height: 2.1875em;
}

/* Settings for Days row */
.tableDays {
  width: 8.75em;
}

/* Settings for Employee column */
.tableEmployees {
  line-height: 2.1875em;
}

/* Settings for Tasks table */
.tableTasks {
  width:100%;
  margin-top:0.3125em;
  empty-cells: show;
  height:62.5em;
  line-height: 2.1875em;
  width: 6.25em;
}

.empTaskCont {
  height: 31.25em;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 1.875em;
}

#table-wrapper-days {
  position: relative;
  width: 66.5em;
  margin-left: 15.8125em;
  /*float:right;*/
}

#table-scroll-days {
  height: auto;
  overflow-x: hidden;
}

#table-wrapper-employees {
  position: relative;
  float:left;
  width:18%;
  margin-top:0.5em;
}

#table-scroll-employees {
  width: auto;
  overflow-y: hidden;
  max-height: 31.25em;
}

#table-wrapper-tasks {
  position: relative;
  width:81%;
  float:right;
}

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 32.625em;
}

.employee-mod-btn{
  float:left;
}

JSFiddle: https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp

I'm still very new to HTML, CSS, and JavaScript so any additional advice on my code is greatly appreciated. Thank you for your time!

Upvotes: 0

Views: 1039

Answers (2)

tremor
tremor

Reputation: 3186

Reviewing the content of your fiddle, the issue is less related to CSS, and more related to your HTML layout. The first problem is that you are building multiple tables when they should just be 1 table. Your top "row" should be part of the table with all the content, instead of a separate table. Your left column is also a separate table. Combine them all into 1 table and that will help a lot.

I hate to redirect your efforts toward a total rewrite because you are learning HTML and CSS, but you may find that a very effective way to implement "responsive" design is with a helper library. I would suggest considering the use of Bootstrap, although there are many others. Bootstrap adds a lot of "helper classes" that will take some of the effort of achieving what you are trying to achieve out of the equation. Consider tables for example, what I think you might be looking for is "breakpoint specific" tables.

https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Another option is to have always responsive tables, where as the screen resizes you will get a horizontal scrolling frame.

There are a lot of options to choose from, so try it out. You can easily add the Bootstrap library to your JS Fiddle in the "resources" section.

Additionally, you might consider storing your data as JSON or in a database. As you progress with this project, you may find Datatables to be a very useful javascript library. It allows you to work with the raw data and build the tables more dynamically.

https://datatables.net/

Upvotes: 3

user9736316
user9736316

Reputation:

Instead of using custom css to style your tables which could take some time for it to be looking good at all screen widths, consider using bootstrap which is a responsive framework for html, css etc. It will be worth while you reading about bootstrap as they provide responsive tables that will help you based on the screen size of the monitor or other device. Check out this link that will help you with building the html structure and adding bootstrap to your workflow. All you will have to do is modify the table to suit your needs.

References:
https://getbootstrap.com/ https://getbootstrap.com/docs/4.0/content/tables/

Upvotes: 0

Related Questions