This is a simple example of displaying the details such as prices and more information in the table format with the use of HTML and CSS. The background of the page has been set to an image with adding the URL of the image. The other styles that are applied for the background are; background size as 100% 100%, background attachment as fixed and the padding as 100px 0. The CSS class text transform has been used with the value of uppercase to automatically convert the text to upper case. The font size of the header is 35px, font weight is 700, font family is 'Lato', sans-serif, font color is #fff, and the text align is center. In order to add the circle shapes, the border radius has been set as 45px along with the other styles as color as #1ab921, background as #fff, padding as 5px, border as 2px solid and box shadow as 0px 0px 11px -5px #000.
credits - https://bootsnipp.com/snippets/z71yy
This is an example of table pricing with the use of the HTML and CSS. The background of the complete page has been set to the value of #303030. The cdn bootstrap CSS links have been imported to the HTML page with the use of the keyword import so the inbuilt styles can be used in the example without re implementing them. Each box of the table has the styles of z-index of 2, top as -13px, border width as 3px, padding as 30px 20px, border radius as 5px, and the border shadow as 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15). In order to add a shade of two colors to the heading section, the CSS style of background image has been used with the value of linear-gradient (#eee, #ddd).
credits - https://bootsnipp.com/snippets/2e6b5
credits - https://bootsnipp.com/snippets/P2eO9
This is an example of displaying the data in a responsive table format with the use of HTML and CSS. The bootstrap CSS style link has been imported to the HTML page with the use of the keyword and . By adding the CSS links of the bootstrap, the grid view of the bootstrap which is already implemented can be used by just setting the class name in the element. In this way, the data could be organized in a table format. The tables have been made responsive with the use of media queries and setting the values of min width as 768px and max width as 992px. The rows have the style of margin top as 0.2em, margin bottom as 0.2em and border as 0.1em solid rgb(163, 163, 163) whereas the border has the thickness of 0.1em with the color of rgb(163, 163, 163).
credits - https://bootsnipp.com/snippets/xV39
This is an example of displaying the details in a table format with the use of HTML and CSS. The bootstrap CSS links have been imported to the HTML page. Bootstrap grid views is used to organize the code. Color codes #C64545, #2D5772 and #1AA85C are used respectively get the colors red, blue and green. In order to display the effects of transform, the CSS class ‘transform’ has been used with the value of transform 0.5s for the transition event. To add the zoom-in effect to the display box, scale class is used with the value (1.05) so its size will be increased with a ratio of 1.05. This style is implemented on the hover event in CSS class so this will be dynamically added to the element on the mouse hover.
credits - https://bootsnipp.com/snippets/5M12R
This is an example for displaying the data in a table format with the use of HTML and CSS. The entire page has the styles of position as relative, height as 100%, background as rgba(0,0,0,.3), font family as 'Roboto', sans-serif, font weight as 300, font size as 17 and font color as #777. Implementation of the curve effect on the border of the quiz window has been accomplished by setting the border radius as 4px. The other styles which are applied for the quiz window are; position as absolute, left as 0, right as 0, top as 50px, margin as auto, width as 600px, background as #fff and overflow as hidden. By setting the overflow as hidden, the scroll bars will not be displayed. The title of the table has the font size as 18px, width as 40%, min width as 160px, font weight as normal and padding top as 3px.
credits - https://codepen.io/sdhnik/pen/JdVaow